ここでは、ヘッダー画像下に設置したグローバルメニューにプルダウンの機能を追加する方法を説明します。
難易度☆☆☆★★
おすすめ度☆☆☆☆☆
メニュー項目が多すぎてごちゃごちゃしてる方にはおすすめです！
やり方はヘッダー画像下にナビゲーションを付けるで説明したやり方とほぼ一緒です。
上記リンクの説明の時に使用したコードに少し追加するだけでかんりょうです。
しかし、追加する場所を間違えると表示された時にレイアウトが崩れてしますので、その点に気をつけましょう。
まず、左のメニューバーのフリースペースの編集をクリックして下記のようなコードを記入します。
この時に、<!-- -->←このタグを使って改行を無効にしておきます。
<div id="headerMenu">
<ul class="menu">
<li><a href="#" target="_blank">メニュー1</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">メニュー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><!--
--> <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>
</ul>
</div>
上記をコピペするのが一番早いのですが、もう既にグローバルメニューを設置していていろいろな設定もしているという方は、下記のコードをサブメニューを追加したいメニューの</a>と</li>の間に挿入すると表示されます。
しかし、この挿入の場所を少しでも間違えるとレイアウトが崩れたり、表示されないといった状況になりますので、挿入の場所には十分に気を付けてください。
<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>
次に、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;
}
以上で完了です！
あとは、プレビューを見ながら微調整してください。