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


縦メニューの階層化

先日は縦メニューの設置方法を紹介しました。
今回はこの縦メニューを階層化する方法を紹介します。

HTMLを編集します。
第2階層は赤い部分、第3階層はオレンジ部分のようにしてください。

<!--▼ 縦メニュー ▼-->
<div id="menu_length">
<ul>
<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_len" onmouseover="this.className='menu_len_on'" onmouseout="this.className='menu_len'"><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_len" onmouseover="this.className='menu_len_on'" onmouseout="this.className='menu_len'"><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>
</div>
<!--▲ 縦メニュー ▲-->



そしてスタイルシートの末尾に以下を加えてください。
既に縦メニューを設置している場合は赤い部分を加えてください。

/* ▼ 縦メニュー ▼ */

#menu_length ul {
margin:0;
padding:0;
}

#menu_length li {
list-style: none;
margin:0;
padding:0;
}

#menu_length li a {
display:block;
text-align:left;
padding-left: 20px;
text-decoration:none;
width:150px; /* 幅 */
line-height:30px; /* 高さ */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
border-left:10px solid #c0c0c0; /* 左飾り線 */
border-bottom:1px solid #333333; /* 下線 */
}

/* ▽マウスが乗ったとき▽ */
#menu_length li a:hover{
background-color:#222222; /* メニューボタンの背景 */
border-left:10px solid #ff0000; /* 左飾り線 */
}
/* △マウスが乗ったとき△ */

/* ▲ 縦メニュー ▲ */

/* ▼ 縦メニュー(階層化)▼ */

#menu_length {
height: 300px; /* メニュー全体の縦の長さ */
}

#menu_length ul {
position:absolute;
}

#menu_length li {
position:relative;
}

#menu_length li.menu_len ul,
#menu_length li.menu_len ul li.menu_len ul,
#menu_length li.menu_len_on ul li.menu_len ul {
display:none;
}

#menu_length li.menu_len_on ul,
#menu_length li.menu_len_on ul li.menu_len_on ul {
position:absolute;
display:block;
top:0;
left:100%;
}

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

/* ドロップダウンリストの透過(IEは透過しません) */
#menu_length > ul > li > ul {
-moz-opacity: 0.9;
opacity: 0.9;
}

/* ▲縦メニュー(階層化)▲ */



これで縦メニューを階層化できます。
縦メニューを階層化するとメニュー全体の縦の長さを設定する必要があります。適当な数値を設定してください。

【2009/12/08 追記】IEではドロップダウンリストは透過しませんが、「第3階層を使わない」という条件で第2階層を透過することができます。スタイルシートに赤い一行を加えてください。

/* ドロップダウンリストの透過(IEは透過しません) */
#menu_length > ul > li > ul {
-moz-opacity: 0.9;
opacity: 0.9;
filter:alpha(opacity=90); /* IEで第2階層のみならば透過 */
}

関連記事



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

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