2014.06.11
css

シンプルなソース・CSSだけでアニメーション・ドロップダウンメニュー

CSS3のアニーメーションエフェクトであるtransitionを使って、CSSだけでjQueryのように動きのあるドロップダウンメニューを作ってみましたのでソースを紹介します。

いろいろと応用できるように、できるだけシンプルなソースにしました。

css042

CSSだけでアニメーション・ドロップダウンメニュー

HTMLソース

<div class="menu">        
<ul>            
<li><a href="#">Menu 01</a>
   <ul>                    
   <li><a href="#">Sub menu 01</a></li>
   <li><a href="#">Sub menu 02</a></li>
   <li><a href="#">Sub menu 03</a></li>
   </ul>
</li>            
<li><a href="#">Menu 02</a>               
   <ul>                    
   <li><a href="#">Sub menu 01</a></li>
   <li><a href="#">Sub menu 02</a></li>
   <li><a href="#">Sub menu 03</a></li>
   <li><a href="#">Sub menu 04</a></li>
   <li><a href="#">Sub menu 05</a></li>
   </ul>
</li>            
<li><a href="#">Menu 03</a>                
   <ul>                    
   <li><a href="#">Sub menu 01</a></li>
   <li><a href="#">Sub menu 02</a></li>
   </ul>                        
</li>            
<li><a href="#">Menu 04</a></li>        
</ul>
</div>

HTMLのソースは特別なことはしていません。
CSSで表示を整えています。

CSSソース

.menu ul{
  margin:0;
  padding:0;
}
.menu ul li {
  list-style: none;
  margin:0;
  padding:0;
  font-size:14px;
  float: left;
  position: relative;
  width: 150px;/*親メニューの幅*/
  height: 40px;/*親メニューの高さ*/
  line-height: 40px;
  background:#FF818D;/*親メニューの背景色*/
  color: #4D4D4D;/*親メニューの文字色*/
  text-align:center;
  font-weight:bold;
}
.menu ul li a {
  color: #4D4D4D;
  display: block;
  text-decoration: none;
}
.menu ul li:hover, .menu ul li a:hover {
  background:#EA2839;/*ホバー時の親メニューの背景色*/
  color:#fff;/*ホバー時の親メニューの文字色*/
}
.menu ul li ul {
  position: absolute;
  top: 40px;/*親メニューの高さと同じにする*/
  width: 150px;
  z-index: 100;
}
.menu ul li ul li {
  visibility: hidden;
  overflow: hidden;
  width: 150px;/*サブメニューの幅*/
  height: 0;
  background:#FFDAD7;/*サブメニューの背景色*/
}
.menu ul li ul li:hover, .menu ul li ul li a:hover {
  background:#FFAFA9;/*ホバー時のサブメニューの背景色*/
}
.menu ul li:hover ul li, .menu ul li a:hover ul li{
  visibility: visible;
  overflow: visible;
  height:40px;/*サブメニューの高さ*/
  z-index: 10;
}
.menu * {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

CSSもかなりシンプルにしたつもりですがソース意外と長いですね。
では簡単な解説です。

  • 5行目~28行目・・・親メニューについて
  • 29行目~50行目・・・サブメニューについて
  • 51行目~57行目・・・*は.menu内の全ての要素に適応するという意味です。ここではアニメーションを指定しています。
知っていると便利なマメ知識!

上記のCSSソースの13行目と14行目に注目です。
13行目はliの高さです。14行目はliのline-heightです。
この値を同じにすると、liの中に文字を入れる場合、上下の中心に文字がきます。
(ただし1行のみの場合)

ウェブフォント

サンプルではGoogleのウェブフォントからCinzelというフォントを使用しています。
使用する場合はHTMLのhead内に以下を記述します。

<link href='http://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet' type='text/css'>

そして、CSSの該当部分に以下を追加します。上記のサンプルだとCSSソース18行目の後に記述しています。

font-family: 'Cinzel', serif;
関連する記事

コメント & トラックバック
  1. あき

    色んなドロップダウンのブログを見ましたが、はじめて実装できました。ありがとうごございます。
    そしてできればなんですが、こちらのメニューをレスポンシブ対応するにはどのようにしたらいいか気が向いたら教えてください(汗


  2. 佐藤

    今作っている自分の店のホームページに使わせていただこうと思っているのですが、センタリングはできないのでしょうか?の次にとかいたのに、このメニューは左寄せで表示されてしまうんです…
    どうしたらいいでしょうか?


  3. MOCHA

    こんにちは^^
    すてきなソースをありがとうございます。
    作成中の自分のお店のWEBページに
    使用させて頂きます。

    本当にありがとうございました。


    • Ri-mode

      MOCHAさん

      コメントありがとうございます。
      お役に立てて大変光栄です。


  4. 小梅

    初めまして。プルダウンメニューを作りたくて、こちらのサイトに辿り着き、ソースを使わせていただきました。
    今迄探したサイトの中で、一番わかりやすく解説してくださっており、初心者の私でもできました。とても嬉しいです!(#^.^#)
    ありがとうございましたm(__)m


    • Ri-mode

      小梅さん

      コメントありがとうございます。
      お役に立ててとても嬉しいです。ソースを公開した甲斐がありました。


  5. […] CSSの知識が少ないもので、どう設定していいものやら悩んでいました。購入した書籍(WordPressデザインブック3.x対応)通り作ると、ドロップダウンのメニューバーは作れなく、ちょっとネット検索して、初心者でもわかりやすいサイトを見つけました。(Ri-mode Rainbow) […]


  6. […] <(_ _)> 1.CSSだけで作る「多階層」なドロップダウンメニュー 2.シンプルなソース・CSSだけでアニメーション・ドロップダウンメニュー 3.アクセシビリティを考えたドロップダウンメニューを実装する […]


  7. moni

    Ri-modeさん

    はじめまして。こちらのメニューを参考に勉強をすすめております。そこで一つ教えていただきたいのですが、親メニュー、サブメニューの幅を150pxから20%へ変更した場合サブメニューが崩れてしまうのですが、どのように変更をすればよろしいのでしょうか?
    よろしくお願いいたします。


  8. […] <(_ _)> 1.CSSだけで作る「多階層」なドロップダウンメニュー 2.シンプルなソース・CSSだけでアニメーション・ドロップダウンメニュー […]


  9. […] <(_ _)> 1.CSSだけで作る「多階層」なドロップダウンメニュー 2.シンプルなソース・CSSだけでアニメーション・ドロップダウンメニュー […]


  10. りか

    素敵なCSSをありがとうございます。
    ウェブ制作は初心者なので、CSSだけでここまでできてとても感激しております。

    1つ質問があり、コメントさせていただきました。
    デザインを少し変えさせていただいたのですが、.menu ul li {}の中にborder:1px solid #444444;を入れたところ、線が被ったところが太く見えてしまいます・・・。

    これを解決する方法をご教授いただけたら嬉しいです。
    お忙しいと思いますが、ご返信お待ちしております!


  11. 山口

    ほどんど初心者で無料テンプレートを修正して利用させて頂いております。ドリームウェーバーを勉強しながら使用しております。

    このレベルの者でも、わかり易く且つすごくかっこいいプルダウンメニューの解説、ありがとうございました。
    どうにか追加できたと思っていたのですが、下記のような状況で困っています。

    コメント欄に記入しました、ウェブサイトのTOP頁をご覧頂ければと思うのですが、今回サイドメニュー(縦型メニュー)の「ブライダル」と「袴・振袖」にサブメニューを追加しました。「ブライダル」と「袴・振袖」にカーソルをおくと、横にプルダウンメニューが表示されます。

    ところが、「ブライダル」のサブメニューをカーソルで下へ移動しようとすると「袴・振袖」のサブメニューが表示されてしまいます。
    どうも表示して1度目はいいようなのですが、「袴・振袖」のサブメニューを表示した後は、上記のようになるようです。

    あと、同じ原因ではないかと思うのですが、「ブライダル」と「袴・振袖」メニューからサブメニュー表示ではなく、サブメニューが表示されるあたりにカーソルを置くとサブメニューが表示されてしまいます。
    ⇒こちらはgoogle chrome、Firefoxだめ。IE8は問題ないよう。

    何か思い当たる部分はありませんでしょうか?
    ご教授のほどよろしくお願い申し上げます。


    • Ri-mode

      山口さん
      参考にしていただき光栄です。
      この記事のメニューは横型メニューで作成しました。
      ですので、縦型メニューをご利用になりたいのでしたら、「CSSだけで動きのあるアコーディオン・メニュー 改訂版 」という記事を参考にしていただければと思います。


  12. […] ・HTML:HTML5でIE8以下のバージョンに対応させる | raining ・IE8とIE9できれいに透過を適応させるCSS ・【シンプルなソース】CSSだけでアニメーション・ドロップダウンメニュー […]


  13. 吉岡

    ありがとうございました!


    • Ri-mode

      吉岡さん

      お役に立てて光栄です。


  14. 吉岡はるき

    かっこいいドロップダウンメニューを探していてたどり着きました。
    さっそく使わせて頂きたいと思ったのですが、メニュー本体の上部に
    100pixほどのアキ(マージン)が生じます。
    どこかに設定があるのかと探したのですが見当たりません。
    どこが原因でしょうか??


    • Ri-mode

      吉岡はるきさん

      マージンの件、ご指摘ありがとうございます。
      CSSのソースを若干修正しましたので、再度お試しください。


コメントをどうぞ

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


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

*


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