CSS3で綺麗なドロップダウンメニューを作る方法

Web Designer Wall is all about design, ideas, web trends, and tutorials. It is designed and maintained by Nick La, who also runs N.Design Studio, IconDock, and Best Web Gallery.

CSS3 Dropdown Menu - WebDesignerWallにおいてCSS3の機能を活用したマルチレベルドロップダウンメニューのテクニックが紹介されている。デモが提供されており、CSS3に対応したブラウザでアクセスすると丸カド影付きのマルチレベルドロップダウンメニューが表示される。IE8やIE7などCSS3に対応していないブラウザでアクセスした場合は角カド影なしのマルチレベルドロップダウンメニューが表示される。どちらの場合もグラデーションはレンダリングされる。

CSS3 Dropdown Menuデモ閲覧例 - Friefox 3.6

CSS3 Dropdown Menuデモ閲覧例 - IE8

テクニックは2つ。ひとつはグラデーションを実現するために1pxの白色透過PNG8イメージを使っている点にある。標準規約になるとみられるグラデーションの指定方法はまだ一部の主要ブラウザしか対応していない。このため、1pxの白色透過PNG8イメージを要素の背景画像として使うことでグラデーションを実現している。1pxの白色透過PNG8イメージは1 x 177のサイズになっており、かぶせる位置を上下させることで、グラデーションの強さを変えている。

デモのソースコードをみるとわかるが、メニュー自体はul要素で組まれている。ul要素をCSSで装飾することでマルチレベルドロップダウンメニューのように見せている。デモのソースコードを参考に、試しやすいようにまとめたHTMLのサンプルコードと閲覧例を次の掲載しておく。HTMLファイルをコピーしたディレクトリからimg/gradient.pngでアクセスできる1pxの白色透過PNG8イメージファイルがある場合とない場合で表示される様子がかわってくる。


メニューそのものはul要素で組み立てられている	マルチダウンドロップメニュー例 - 透過PNGがない場合 Firefox 3.6


マルチダウンドロップメニュー例 - 透過PNGがある場合 Firefox 3.6	マルチダウンドロップメニュー例 - 透過PNGがある場合 IE8

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS3マルチレベルトップダウンメニューデモ</title>
<style type="text/css">
/* http://www.webdesignerwall.com/demo/css3-dropdown-menu/style.css より抜粋 */
body {
  font: normal .8em/1.5em Arial, Helvetica, sans-serif;
  background: #ebebeb;
  width: 900px;
  margin: 100px auto;
  color: #666;
}
a {
  color: #333;
}
#nav {
  margin: 0;
  padding: 7px 6px 0;
  background: #7d7d7d url(img/gradient.png) repeat-x 0 -110px;
  line-height: 100%;
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
  margin: 0 5px;
  padding: 0 0 8px;
  float: left;
  position: relative;
  list-style: none;
}
/* main level link */
#nav a {
  font-weight: bold;
  color: #e7e5e5;
  text-decoration: none;
  display: block;
  padding:  8px 20px;
  margin: 0;
  -webkit-border-radius: 1.6em;
  -moz-border-radius: 1.6em;
  text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
  background: #000;
  color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
  background: #666 url(img/gradient.png) repeat-x 0 -40px;
  color: #444;
  border-top: solid 1px #f8f8f8;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
  box-shadow: 0 1px 1px rgba(0,0,0, .2);
  text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
  background: none;
  border: none;
  color: #666;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#nav ul a:hover {
  background: #0078ff url(img/gradient.png) repeat-x 0 -100px !important;
  color: #fff !important;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
  display: block;
}
/* level 2 list */
#nav ul {
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 35px;
  left: 0;
  background: #ddd url(img/gradient.png) repeat-x 0 0;
  border: solid 1px #b4b4b4;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
  box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#nav ul a {
  font-weight: normal;
  text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
  left: 181px;
  top: -3px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
  -webkit-border-top-left-radius: 9px;
  -moz-border-radius-topleft: 9px;
  -webkit-border-top-right-radius: 9px;
  -moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
  -webkit-border-bottom-left-radius: 9px;
  -moz-border-radius-bottomleft: 9px;
  -webkit-border-bottom-right-radius: 9px;
  -moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#nav {
  display: inline-block;
}
html[xmlns] #nav {
  display: block;
}
* html #nav {
  height: 1%;
}
</style>
</head>
<body>
<ul id="nav">
  <li class="current"><a href="http://journal.mycom.co.jp/">MYCOMジャーナル</a></li>
  <li><a href="http://journal.mycom.co.jp/enterprise/">エンタープライズ</a>
    <ul>
      <li><a href="http://journal.mycom.co.jp/enterprise/javascript/">JavaScript / CSS / HTML</a></li>
      <li><a href="http://journal.mycom.co.jp/enterprise/programming/">プログラミング</a></li>
      <li><a href="http://journal.mycom.co.jp/enterprise/admin/">システム管理</a></li>
      <li><a href="http://journal.mycom.co.jp/enterprise/network/">ネットワーク</a></li>
      <li><a href="http://journal.mycom.co.jp/enterprise/security/">セキュリティ</a></li>
      <li><a href="http://journal.mycom.co.jp/enterprise/linux/">Linux / BSD</a>
        <ul>
          <li><a href="http://journal.mycom.co.jp/news/2010/02/23/049/">PC-BSD 8.0</a></li>
          <li><a href="http://journal.mycom.co.jp/news/2010/02/15/052/">NetBSD 5.0.2</a></li>
          <li><a href="http://journal.mycom.co.jp/articles/2010/02/15/openoffice32/">OpenOffice.org 3.2.0</a></li>
          <li><a href="http://journal.mycom.co.jp/news/2010/02/16/037/">grep(1)</a></li>
          <li><a href="http://journal.mycom.co.jp/news/2010/02/04/032/">less(1)</a></li>
          <li><a href="http://journal.mycom.co.jp/news/2010/01/07/028/">top(1)</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</body>
</html>