以下の内容はhttp://10plate.blog44.fc2.com/blog-entry-230.htmlより取得しました。


メニューバーのドロップダウン

以前に横メニューバーをブログタイトル下に表示する方法を紹介しました。
今回はこのメニューをドロップダウンさせるカスタマイズを紹介します。

ドロップダウンは2段階(第3階層の表示)まで対応しました。

IE6以下を無視すればCSSのみでドロップダウンが可能なのですが、まだまだ無視できる数ではないため一部JavaScriptを用いています。

HTMLを編集します。
赤とオレンジの部分が新たに追加した箇所です。
第3階層まで必要ない場合はオレンジ部分を削除してください。

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事1</a></li>
<li><a href="<%url>blog-entry-2.html">記事2</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ1</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ2</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ3</a></li>

<li class="menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'"><a href="#">第1階層</a>
<ul>
<li><a href="#">第2階層</a></li>
<li><a href="#">第2階層</a></li>
<li><a href="#">第2階層</a></li>
<li class="menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'"><a href="#">第2階層</a>
<ul>
<li><a href="#">第3階層</a></li>
<li><a href="#">第3階層</a></li>
<li><a href="#">第3階層</a></li>
</ul>

</li>
</ul>
</li>


</ul>
<!--▲ メニューバー ▲-->



次にスタイルシートの末尾に以下を加えてください。
既にメニューバーを実装済みの方は赤い部分のみ追加してください。

/* ▼メニューバー▼ */
ul#menu_bar {
font-size: 80%; /* 文字サイズ */
height:25px; /* 高さ */
background-color:#000000; /* 背景色 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔 */
margin-bottom:5px; /* 下の間隔 */
}

#menu_bar li {
list-style-type:none;
float:left;
line-height:25px; /* 高さ */
margin:0px;
padding:0px;
}

#menu_bar li a {
display:block;
text-align:center;
width:100px; /* 1つのメニューボタンの幅 */
border-right:1px solid #333333; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
text-decoration:none;
}

#menu_bar li a:hover{
color:#ffffff; /* マウスが乗ったときのリンク文字の色 */
background-color:#222222; /* マウスが乗ったときの背景色 */
text-decoration:none;
}
/* ▲メニューバー▲ */

/* ▼メニューバー(ドロップダウン)▼ */

#menu_bar ul {
position:absolute;
margin:0;
padding:0;
}

#menu_bar li {
position:relative;
margin:0;
padding:0;
}

#menu_bar li ul li {
float:none;
}

#menu_bar li.menu ul,
#menu_bar li.menu ul li.menu ul,
#menu_bar li.menu_on ul li.menu ul {
display:none;
}

#menu_bar li.menu_on ul {
position:absolute;
display:block;
top:100%;
left:0;
}

#menu_bar li.menu_on ul li.menu_on ul {
position:absolute;
display:block;
top:0;
left:100%;
}

/* ▽IE6バグ対応▽ */
* html #menu_bar li li,
* html #menu_bar li li li {
font-size:1px;
line-height:0;
}
* html #menu_bar li li a,
* html #menu_bar li li li a {
display:block;
font-size:10pt;
line-height:25px;
}
/* △IE6バグ対応△ */

#menu_bar li li a,
#menu_bar li li li a {
border-top:1px solid #111111; /* 区切り線 */
}

/* ドロップダウンリストの透過(IE6以下未対応) */
#menu_bar > li > ul {
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}

/* ▲メニューバー(ドロップダウン)▲ */


これでドロップダウンメニューが出来ます。
区切り線ドロップダウンリストの透過はお好きな様に設定してください。

ドロップダウンは2段階(第3階層の表示)まで対応しているので、親子カテゴリの表示に利用しても良さそうですね。


【2009/08/04 追記】
filter:alpha(opacity); を使うと、IE7,8で第3階層が表示されませんでした。スタイルシートからこれを削除してください。
申しわけございません。m(__)m
また、第2、第3階層のメニュー幅をそれぞれ設定したい場合は、スタイルシートの末尾に以下を加えてください。

/* 第2階層の幅 */
#menu_bar li li a {
width:150px;
}

/* 第3階層の幅 */
#menu_bar li li li a {
width:150px;
}


ただし第3階層の始点は、第2階層の終点より少しずれた位置になってしまうのでご了承ください。
関連記事



以上の内容はhttp://10plate.blog44.fc2.com/blog-entry-230.htmlより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.13