スタイルシートで実装するプルダウンメニュー

前回のCSSスタイルシートで実装するアコーディオンエフェクト:IE6対応ところ紹介したGoogle コードを利用して、
DesignWalkerさんで紹介されていました
Scriptを使わないCSSエフェクト、Tipsいろいろの中のCSS-only Drop-down MenusをIE6対応で作ってみました。
すでにあったらすみません。

デモ1
デモ:アコーディオン応用

デモ1のソース
HTML

<ul id=”nav”>
	<li><a href=”#” mce_href=”#”>nav_01</a>
		<ul>
			<li><a href=”#” mce_href=”#”>nav_01_01</a></li>
			<li><a href=”#” mce_href=”#”>nav_01_02</a></li>
			<li><a href=”#” mce_href=”#”>nav_01_03</a></li>
			<li><a href=”#” mce_href=”#”>nav_01_04</a></li>
		</ul>
	</li>
	<li><a href=”#” mce_href=”#”>nav_02</a>
		<ul>
			<li><a href=”#” mce_href=”#”>nav_02_01</a></li>
			<li><a href=”#” mce_href=”#”>nav_02_02</a></li>
			<li><a href=”#” mce_href=”#”>nav_02_03</a></li>
			<li><a href=”#” mce_href=”#”>nav_02_04</a></li>
			<li><a href=”#” mce_href=”#”>nav_02_05</a></li>
			<li><a href=”#” mce_href=”#”>nav_02_06</a></li>
			<li><a href=”#” mce_href=”#”>nav_02_07</a></li>
			<li><a href=”#” mce_href=”#”>nav_02_08</a></li>
		</ul>
	</li>
	<li><a href=”#” mce_href=”#”>nav_03</a>
		<ul>
			<li><a href=”#” mce_href=”#”>nav_03_01</a></li>
			<li><a href=”#” mce_href=”#”>nav_03_02</a></li>
		</ul>
	</li>
	<li><a href=”#” mce_href=”#”>nav_04</a>
		<ul>
			<li><a href=”#” mce_href=”#”>nav_04_01</a></li>
		</ul>
	</li>
</ul>
<hr />

CSS

#nav li
	{
	width:200px;
	background:#DDDDDD;
	float:left;
	}
#nav li > ul
	{
	display:none;
	}
#nav li:hover > ul
	{
	display:block;
	}
#nav li ul li
	{
	width:185px;
	padding:0px 0px 0px 15px;
	display:block;
	}
#nav li ul li:hover
	{
	background:#AAAAAA;
	display:block;
	}

デモ:アコーディオン応用
HTML

<ul id=”nav”>
	<li class=”nav_01″><a href=”#”>nav_01</a>
		<ul>
			<li><a href=”#”>nav_01_01</a></li>
			<li><a href=”#”>nav_01_02</a></li>
			<li><a href=”#”>nav_01_03</a></li>
			<li><a href=”#”>nav_01_04</a></li>
		</ul>
	</li>
	<li class=”nav_02″><a href=”#”>nav_02</a>
		<ul>
			<li><a href=”#”>nav_02_01</a></li>
			<li><a href=”#”>nav_02_02</a></li>
			<li><a href=”#”>nav_02_03</a></li>
			<li><a href=”#”>nav_02_04</a></li>
			<li><a href=”#”>nav_02_05</a></li>
			<li><a href=”#”>nav_02_06</a></li>
			<li><a href=”#”>nav_02_07</a></li>
			<li><a href=”#”>nav_02_08</a></li>
		</ul>
	</li>
	<li class=”nav_03″><a href=”#”>nav_03</a>
		<ul>
			<li><a href=”#”>nav_03_01</a></li>
			<li><a href=”#”>nav_03_02</a></li>
		</ul>
	</li>
	<li class=”nav_04″><a href=”#”>nav_04</a>
		<ul>
			<li><a href=”#”>nav_04_01</a></li>
		</ul>
	</li>
</ul>
<hr />

CSS

nav li.nav_01 ,
#nav li.nav_02 ,
#nav li.nav_03 ,
#nav li.nav_04
	{
	width:200px;
	height:15px;
	overflow:hidden;
	background:#DDDDDD;
	float:left;
	}
#nav li.nav_01:hover
	{
	height:80px;
	}
#nav li.nav_02:hover
	{
	height:145px;
	}
#nav li.nav_03:hover
	{
	height:50px;
	}
#nav li.nav_04:hover
	{
	height:35px;
	}
#nav li.nav_01 li ,
#nav li.nav_02 li ,
#nav li.nav_03 li ,
#nav li.nav_04 li
	{
	padding:0px 0px 0px 15px;
	}
#nav li.nav_01 li:hover ,
#nav li.nav_02 li:hover ,
#nav li.nav_03 li:hover ,
#nav li.nav_04 li:hover
	{
	background:#AAAAAA;
	}

デモの2番目の方は使い道は少ないと思います。
また、文字サイズの拡大に対応してません・・・。

This entry was posted in 未分類. Bookmark the permalink. Follow any comments here with the RSS feed for this post.

コメントをどうぞ

Your email is never published nor shared. Required fields are marked *

*

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">