アメブロで「グローバルメニュー」と「プルダウン」

ブログカスタマイズメモです＊

今回はヘッダーの下に

「グローバルメニュー」いわゆるメニューボタンと

そのボタンにマウスを乗せると、

さらにメニューが出てくる「プルダウンメニュー」のメモです＊


「アメブロカスタマイズで人が集まるブログ作り」さんを参考にしました。

以下カスタマイズスクリプトです。

ちなみにプルダウン付きです。

いらない方はそのスクリプト消して下さい。

CSS

/* ヘッダー下にグローバルナビ(グローバルメニュー)を設置する */
/* ▼▼▼ 変更しない */
#wrap,.skinContentsArea{
  position:relative;
}
#headerMenu{
  position:absolute;
  margin:0;
  padding:0;
}
#headerMenu ul.menu{
  margin:0;
  padding:0;
  list-style: none;
}
#headerMenu ul.menu li{
  display:inline;
}
#headerMenu ul.menu li a{
  display:block;
  float:left;
  padding:0;
  white-space:nowrap;
  overflow:hidden;
  text-align:center;
}
/* ▲▲▲ 変更しない */
/* ▼▼▼ 位置・サイズ調整 */
#wrap,.skinContentsArea{
  padding-top:40px;          /* メニュー設置用スペース */
}
#headerMenu{
  top:0px;                      /* 上下位置調整 */
  left:0px;                     /* 左右位置調整 */
  width:980px;                  /* メニュー全体の幅 */
}
#headerMenu ul.menu li a{
  width:195px;                  /* ボタンの幅 */
  line-height:40px;             /* ボタンの高さ */
  font-size:11px;               /* ボタンの文字サイズ */
}
/*▲▲▲ 位置・サイズ調整 */
/*▼▼▼ 色・文字装飾・背景など */
#headerMenu ul.menu li a{       /* 通常時 */
  color:#ffffff;                /* 文字色(白) */
  font-weight:normal;           /* 太字(なし) */
  text-decoration:none;         /* 下線(なし) */
  background-color:#434343;     /* 背景色(濃い青) */
  background-image:url();       /* 背景画像 */
  background-repeat:repeat;     /* 背景画像繰り返し */
  border-right:1px solid #434343;
  border-top:1px solid #444444;
}
#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
  color:#ffffff;                /* 文字色(白) */
  font-weight:normal;           /* 太字(なし) */
  text-decoration:none;         /* 下線(なし) */
  background-color:#555555;     /* 背景色(薄い青) */
  background-image:url();       /* 背景画像 */
  background-repeat:repeat;     /* 背景画像繰り返し */
}
/*▲▲▲ 色・文字装飾・背景など */

/* グローバルナビにプルダウンメニューを追加する */
/*▼▼▼ 変更しない */
#headerMenu ul.menu>li{
  display:block;
  float:left;
  overflow:hidden;
}
#headerMenu ul.menu li a{
  float:none;
}
#headerMenu ul.submenu{
  margin:0;
  padding:0;
}
#headerMenu ul.submenu li{
  display:block;
  margin:0;
  padding:0;
  overflow:hidden;
}
/*▲▲▲ 変更しない */
#headerMenu ul.menu>li{
  height:40px;               /* ボタンの高さ */
  background-color:#434343;  /* IE7対応 */
  background-image:url();    /* 背景画像 */
}
#headerMenu ul.menu>li:hover{
  height:auto;
}

フリースペース

<!-----*ヘッダー下にグローバルナビ(グローバルメニュー)を設置する*----->
<div id="headerMenu"><!--
--><ul class="menu"><!--
--><li><a href="リンク先" target="">メニュー1</a></li><!--
--><li><a href="リンク先" target="">メニュー2</a></li><!--
--><li><a href="リンク先" target="">メニュー3</a></li><!--
--><li><a href="リンク先" target="">メニュー4</a></li><!--
--><li><a href="#" target="">メニュー5</a><!--
-->  <ul class="submenu"><!--
-->  <li><a href="リンク先" target="">プルダウンメニュー1</a></li><!--
-->  <li><a href="リンク先" target="">プルダウンメニュー2</a></li><!--
-->  <li><a href="リンク先" target="">プルダウンメニュー3</a></li><!--
-->  </ul><!--
--></li>
</li><!--
--></ul><!--
--></div>
<!-----*ヘッダー下にグローバルナビ(グローバルメニュー)を設置する*----->

以上メモでした～