CSS スタイルシートの小技等のご紹介

子ページがどんどん展開するナビゲーション

2015年1月22日
この記事は掲載から1669日経過しています。
情報が古い可能性が有りますのでご了承下さい

先ずはサンプル

個人的にはこの子ページ展開ってあまり好きでは無いのですが、割と需要があると思うのでご紹介致します。

CSS

[css]
#navigation{
height: 50px;
background-color: #3F583B;
}
#navigation ul{
background-color: #3F583B;
margin: 0; padding: 0;
}
#navigation li{
display: block;
float: left;
line-height: 50px;
height: 50px;
margin: 0;
padding: 0;
position: relative;
}
#navigation li a{
display: block;
height: 50px;
line-height: 50px;
padding: 0 15px;
color: #FFFFFF;
text-decoration: none;
}
#navigation a:hover {
background: #54744F;
}
#navigation ul ul{
display: none;
position: absolute;
top: 50px;
}
#navigation ul ul li{
float: none;
width: 150px;
border-top: 1px solid #54744F;
height: 35px;
line-height: 35px;
}
#navigation ul ul li a {
font-size:90%;
height: 35px;
line-height: 35px;
}
#navigation ul li:hover > ul{
display: block;
}
#navigation ul ul li ul {
left: 150px;
top: 0;
}
[/css]

HTML

[html]
<!– navigation –>
<div id="navigation" class="hidden">
<ul>
<!– MENU 1 **************************************************** –>
<li class="page_item"><a href="#">MENU-1</a>
<ul>
<li class="page_item"><a href="#">MENU1-1</a>
<ul>
<li class="page_item"><a href="#">MENU1-1-1</a>
<ul>
<li class="page_item"><a href="#">MENU1-1-1-1</a>
<ul>
<li class="page_item"><a href="#">MENU1-1-1-2-1</a></li>
<li class="page_item"><a href="#">MENU1-1-1-2-2</a></li>
</ul>
</li>
<li class="page_item"><a href="#">MENU1-1-1-2</a></li>
</ul>
</li>
<li class="page_item"><a href="#">MENU1-1-2</a></li>
<li class="page_item"><a href="#">MENU1-1-4</a></li>
<li class="page_item"><a href="#">MENU1-1-2</a></li>
</ul>
</li>
<li class="page_item"><a href="#">MENU1-2</a>
<ul>
<li class="page_item"><a href="#">MENU1-2-1</a></li>
<li class="page_item"><a href="#">MENU1-2-2</a></li>
</ul>
</li>
</ul>
</li>
<!– MENU 2 **************************************************** –>
<li class="page_item"><a href="#">MENU-2</a></li>
<!– MENU 2 **************************************************** –>
<li class="page_item"><a href="#">MENU-3</a>
<ul>
<li class="page_item"><a href="#">MENU3-1</a></li>
<li class="page_item"><a href="#">MENU3-2</a></li>
</ul>
</li>
</ul>
</div>
<!– #navigation –>
[/html]

 
  • このエントリーをはてなブックマークに追加
  • LINEで送る

PAGE TOP