CSSのみでプルダウン形式のメニューを実装する

よくメニューなどのナビゲーションにカーソルをあわせるとプルダウンなどで更にメニューが表示されるようなナビゲーションがあります。このような動きのあるメニューはjqueryなどを使用して実装したりしますが、ここでは、CSSのみでプルダウンの動きをつけたメニューを実装してみたいと思います。CSSのみなのでとても軽く、簡単に実装できます。

HTMLの用意

まずは、メニューを表示するソースを用意。

<ul class="menu">
   <li><a href="">メニュー1</a>
      <ul>
         <li><a href="">子メニュー</a></li>
         <li><a href="">子メニュー</a></li>
         <li><a href="">子メニュー</a></li>
      </ul>
   </li>
   <li><a href="">メニュー2</a>
      <ul>
         <li><a href="">子メニュー</a></li>
         <li><a href="">子メニュー</a></li>
         <li><a href="">子メニュー</a></li>
      </ul>
   </li>
   <li><a href="">メニュー3</a>
      <ul>
         <li><a href="">子メニュー</a></li>
         <li><a href="">子メニュー</a></li>
         <li><a href="">子メニュー</a></li>
      </ul>
   </li>
</ul>

cssでプルダウンメニューの実装

それでは、cssを記述していき、プルダウンメニューを実装していきます。

.menu li {
   position: relative;
   float: left;
}
.menu li a {
   display: block;
   width: 220px;
   padding: 10px;
}
.menu li a:hover {
   background: #dbdbdb;
}
.menu li:hover > ul {
   display: block;
}
.menu ul {
   display: none;
   position: absolute;
   top: 38px;
   width: 240px;
}

最初のほうの指定は、見た目に関する指定なので、特に問題はないでしょう。

.menu li:hover > ul {
   display: block;
}

この部分で、子メニューに対して「display: block;」を指定してあげることで、親メニューにカーソルがのったときに子メニューが表示されるようになります。

.menu ul {
   display: none;
   position: absolute;
   top: 38px;
   width: 240px;
}

子メニューに対して「display: none;」を指定してあげることで、通常は隠れて見えない状態になります。そして、「top: 38px;」で親メニューのちょうど下に子メニューが表示されるようにします。

• DEMO

あとは、CSS3のアニメーション機能を使って、ふわっとロールオーバーする感じの動きをつけてみます。リスト要素に「transition」を追加します。

.menu li a {
   display: block;
   width: 220px;
   padding: 10px;
   webkit-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
   transition-duration: 0.3s;
}

これは、0.3秒かけて背景色が変化するという指定をしています。

• DEMO

縦型メニューでスライドメニューを実装する

次に、縦に並んだメニューで横にスライドして表示される動きに変えてみます。子メニューに対して、メニューの幅の分だけずらしてあげればOKです。ここでは、「left: 240px;」としました。

.menu ul {
   display: none;
   position: absolute;
   top: 0;
   left: 240px;
   width: 240px;
}

• DEMO

以上が、CSSのみでプルダウンメニューを実装する方法となります。