グローバルメニューにプルダウンメニューを追加する方法

アメブロカスタマイズのわざめーばです。

こんにちは。

前回、ヘッダー下にグローバルナビ(グローバルメニュー)を設置する方法をご紹介しましたが、今回は、このグローバルナビにプルダウンメニューを追加するカスタマイズ方法をご紹介します。

今回のカスタマイズで、冒頭の画像のように、グローバルナビにプルダウンメニューを追加できます。

なお、今回ご紹介する方法は、新旧両デザイン対応ですので、お使いのデザインが新カスタマイズ向けデザイン『CSS編集用デザイン』でも、旧来のカスタマイズ向けデザイン『【カスタム可能】ベーシック』でも利用できます。

まず確認

このカスタマイズは、CSSの編集で行いますので、もし、やり方がわからない場合はCSSの編集方法を確認しておいて下さい。

また、フリースペース(フリープラグインも可)も利用しますので、フリースペースの編集方法の確認と、サイドバーの配置でフリースペースが「使用する機能」に入っていることの確認をしておいてください。

CSSを編集

まずは、CSSの編集で、以下のようなコードをユーザーCSSの最後に追加します。

/* グローバルナビにプルダウンメニューを追加する */
/*▼▼▼ 変更しない */
#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:#ffffff;/* IE7対応 */
}
#headerMenu ul.menu>li:hover{
  height:auto;
}

もちろん、工夫次第で色々と装飾できますが、今回は極力シンプルな内容にしてあります。

赤文字の数値にはメニューボタンの高さを設定します。

(『IE7対応』の部分は、IE7で表示した際に背景が透けてしまってうまく動作しない現象が出たのでそれを回避するために設定しました。)

フリースペースを編集

次に、フリースペース(フリープラグインも可)に設定してあるグローバルナビのタグに、プルダウンメニュー用のタグを追加します。

<div id="headerMenu"><!--
--><ul class="menu"><!--
--><li><a href="#" target="_blank">メニュー1</a></li><!--
--><li><a href="#" target="_blank">メニュー2</a></li><!--
--><li><a href="#" target="_blank">メニュー3
</a><!--
-->  <ul class="submenu"><!--
-->  <li><a href="#" target="_blank">サブメニュー1</a></li><!--
-->  <li><a href="#" target="_blank">サブメニュー2</a></li><!--
-->  <li><a href="#" target="_blank">サブメニュー3</a></li><!--
-->  <li><a href="#" target="_blank">サブメニュー4</a></li><!--
-->  <li><a href="#" target="_blank">サブメニュー5</a></li><!--
-->  </ul><!--
-->
</li><!--
--><li><a href="#" target="_blank">メニュー4</a></li><!--
--><li><a href="#" target="_blank">メニュー5</a></li><!--
--></ul><!--
--></div>

追加するのは太字の部分です。

グローバルナビのタグの中のプルダウンメニューを追加したいボタンに該当する部分の</a></li>の間に割り込ませるように追加してください。

この、割りこませる位置を間違えると、プルダウンメニューが正しく表示されませんので、十分に注意して下さい。

赤文字緑文字の部分はヘッダー下にグローバルナビ(グローバルメニュー)を設置する方法と同様ですのでご参照ください。

ちょっと難易度は高めかもしれませんが、よろしければ、挑戦してみてください。

関連記事

ヘッダー下にグローバルナビ(グローバルメニュー)を設置する方法
CSSの編集

この記事は、2010/11/10の記事を2011/09/29に新旧統合記事として全面書きかえしました。

アメブロカスタマイズで自分らしい魅力的なアメブロを作る技