jquery 基本的なドロップダウンメニュー

CATEGORY: jQuery | TAG:

2013年5月18日

CSS による基本的な記述

メニューの幅や背景、テキストの位置などの指定は様々な方法が考えられるが、ここでは単純に幅はメニューの文字数に合わせ、右側にパディング（20px）を設け、背景は背景色で指定する。

HTML は ul 要素を入れ子にしてマークアップする。

  • CSS や jQuery で指定しやすいように id 「header-nav」を指定した div 要素内にメニューを記述
  • 親メニューの ul 要素にクラス「menu」を指定
  • サブメニューの ul 要素にクラス「sub-menu」を指定
<div id="header-nav">
  <ul class="menu">
      <li>
          <a href="#">Home</a>
      </li>
      <li>
          <a href="#">Menu-A</a>
              <ul class="sub-menu">
                  <li>
                      <a href="#">SubMenu-A-1</a>
                  </li>
                  <li>
                      <a href="#">SubMenu-A-2</a>
                  </li>
              </ul>
      </li>
      <li>
          <a href="#">Menu-B</a>
              <ul class="sub-menu">
                  <li>
                      <a href="#">SubMenu-B-1</a>
                  </li>
                  <li>
                      <a href="#">SubMenu-B-2</a>
                  </li>
              </ul>
      </li>
  </ul>
</div>

以下はほぼ最低限の CSS の記述。これで単純なドロップダウンメニューが表示できる。

#header-nav ul {
  list-style-type: none;
}
#header-nav ul li {
  position: relative;  /*z-indexの指定や子要素の基準とするために指定*/
  z-index: 1;  /*ドロップダウンしたメニューが隠れないように*/
  float: left;  /*親メニューは横1列に並べる*/
  padding-right: 20px;  /*メニュー項目の間隔を指定*/
}
#header-nav ul li a{ 
  display: block;   /*要素の幅いっぱいにするために指定*/
  height: 30px;
  line-height: 30px;
  color: #666;
  font-size: 12px; font-size: 1.2rem; 
  text-decoration: none;
}

#header-nav ul li a:hover {
  background-color: #EEE;    /*マウスオーバー時に背景色を変える*/
}

#header-nav ul li ul.sub-menu {
  display: none;  /*サブメニューは最初は非表示にしておく*/
  position: absolute;  /*絶対配置にしておかないとうまくいかない*/
  top: 30px;  /*位置の指定*/
  left: 0;
}
#header-nav ul li:hover ul.sub-menu {
  display: block;    /*マウスオーバー時にサブメニューを表示する*/
}
#header-nav ul li ul.sub-menu li{
  float: none;  /*サブメニューはフロートさせないので解除*/
  padding: 0;  /*親メニューのパディングを解除。これをしないとボーダーがはみ出る*/
}
#header-nav ul li ul.sub-menu li:first-child{
  border-top: 1px solid #eee;  /*最初の要素のみボーダートップを指定*/
}
#header-nav ul li ul.sub-menu li a {
  border: 1px solid #eee;  /*ボーダーの指定*/
  border-top: none;  /*ボーダートップは重なって太くなるので解除*/
  padding: 0 10px;  /*ボーダーとの間にパディングを入れる*/
  background-color: #FFF;  /*背景色を白に指定*/
  color: #666;
}

#header-nav ul li ul.sub-menu li a:hover  {
  background-color: #EEE;  /*マウスオーバー時に背景色を変える*/
  display: block;
}

jQuery を使ってアニメーション効果を追加

  • 親メニューの li 要素（ul 要素の直接の子要素の li 要素）の子要素の ul 要素（サブメニュー）を非表示にする。
  • 親メニューの li 要素にマウスオーバーした場合、スライドダウンでサブメニューを表示する（アニメーションしていないものを対象とする）。
  • マウスアウト時はサブメニューを非表示にする。
$('#header-nav ul>li').find('ul').hide();
  $('#header-nav ul>li').hover(function(){
      $('ul:not(:animated)', this).slideDown(300);
    },
    function(){
      $('ul',this).hide();
  });