2011.06.08
css

CSSだけでドロップダウンメニュー JavaScriptなし

先日、ウェブを勉強し始めたばかりの友達にドロップダウンメニューについて聞かれたのですが、作りかけのソースを見てみるとCSSだけでドロップダウンメニューを作ろうとしてました。
私はそういう場合、JavaScriptを使うのですが、そんな作り方もあるんだ、と逆にとっても感心しました。

人によって書き方作り方は色々なんですね。
作りかけだったソースに少し加えて完成させてみました。

以下のようにして作りました。
CSS

body { font-size:12px;}
ul li { list-style: none;}
.menu { margin-bottom: 150px;}
.menu ul li {
  float: left;
  position: relative;
  margin-right: 0px;
  width: 80px;
  height: 30px;
}
.menu ul li table {
  border-collapse: collapse;
  border: none;
  font-size: 90%;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.menu ul li ul {
  visibility: hidden;
  overflow: hidden;
  position: absolute;
  top: 30px;
  left: -40px;
  width: 80px;
  height: 0;
  z-index: 100;
}
.menu ul li ul li {
  margin-bottom: 0;
  width: 80px;
  height: 30px;
}
.menu ul li a {
  color: #fff;
  display: block;
  text-decoration: none;
  padding-left: 25px;
  height: 30px;
  line-height: 30px;
}
.menu ul li a:hover {
  position: relative;
  z-index: 100;
}
.menu ul li:hover ul ,
.menu ul li a:hover ul {
  visibility: visible;
  overflow: visible;
  height: auto;
  z-index: 10;
}
.menu li.home { background-color:red; }
.menu li.blog { background-color:orange; }
.menu li.photo { background-color:yellow; }
.menu li.movie { background-color:pink;}
.menu li.detail1 { background-color:green;}
.menu li.detail2 { background-color:blue; }
.menu li.detail3 { background-color:purple; }

HTML

<div class="menu">
<ul>
	<li class="home"><a href="#">Home</a></li>
	<li class="blog"><a href="#">Blog<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
	<li class="detail1"><a href="#">Detail1</a></li>
	<li class="detail2"><a href="#">Detail2</a></li>
</ul>
<!--[if lte IE 6]></td>
</tr>
</table>
</a><![endif]--></li>
	<li class="photo"><a href="#">Photo<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]>
<table>
<tr>
<td>
<![endif]-->
<ul>
	<li class="detail3"><a href="#">Detail1</a></li>
</ul>
<!--[if lte IE 6]></td>
</tr>
</table>
</a><![endif]--></li>
	<li class="movie"><a href="#">Movie</a></li>
</ul>
</div>

CSSだけでドロップダウンメニュー

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP