多階層ドロップダウンメニュー

jQuery

これは使いそうだよなぁ〜！では早速コードを！
ちなみにここに記載されているCSSコードをそのまま使用してもダメだったので注意。かなり悩んでしまった。。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <style type="text/css">
/* この全称セレクタの指定はサンプルになかった。。 */
*{
    padding:0; /* この指定がないとサブメニューがメニューとずれて表示される。 */
    list-style-type:none; /* この指定がないとリストの●が表示される。 */
}
ul.menu li{
    float:left;
    width:179px;
    height:48px;
    background:url("http://editors.ascii.jp/m-kobashigawa/jquery_sample/019/images/btn.png");
    /* このパラメータの指定もサンプルなかった。。 */
    /* この指定がないとサブメニューが横並びになってしまう。 */
    position:relative;
}
ul.menu li a{
    display:block;
    width:100%;
    height:100%;
    line-height:48px;
    text-indent:30px;
    font-weight:bold;
    color:#CFDFB5;
    text-decoration:none;
}
ul.menu li a:hover{
    background:url("http://editors.ascii.jp/m-kobashigawa/jquery_sample/019/images/btn_over.png");
}
ul.menu li ul.sub{
    position:absolute;
}
ul.menu{
    zoom:1;
}
ul.menu:after {
    height:0;
    visibility:hidden;
    content:".";
    display:block;
    clear:both;
}
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
    $(function(){
      //サブメニューを隠す
      $("ul.sub").hide();
      //mouseoverとmouseoutイベントによく似ているが少し挙動がことなるhoverを使う。
      //--------------------------------------------------
      //○mouseover()／mouseout()
      //　　セレクターで指定した要素内に子要素が存在する場合、
      //　　子要素にマウスカーソルが移動した際にもイベントの処理が実行される。
      //○hover()
      //　　セレクターで指定した要素にマウスカーソルが重なったか、外れたかだけを感知し、
      //　　子要素への移動は感知しない。
      //　　第１引数にマウスオーバー時の処理、第２引数にマウスアウト時の処理を指定する。
      //--------------------------------------------------
      $("ul.menu li").hover(function(){
         //現在選択中のメニュー配下で、
         //かつ「アニメーションがされていない」サブメニューリストを表示する。
         $("ul:not(:animated)",this).slideDown("fast")

         //↓こういう指定にすると・・・
         //$("ul",this).slideDown("fast")
         //①メニューにマウスオーバーしてサブメニューを表示する。
         //②メニューからマウスアウトし、
         //③サブメニューがslideUpしきってしまう前にサブメニュー上にマウスオーバーする。
         //④マウスをそのままの位置に固定すると、サブメニューがslideDownとslideUpを繰り返す。
         //という動作をします。なので、:not(:animated)は指定しましょう。
      },
      function(){
        //現在選択中のメニュー配下のサブメニューリストを非表示にする。
        $("ul",this).slideUp("fast");
      })
    })
    </script>
  </head>
  <body>
    <ul class="menu">
      <li><a href="#">メニューA</a>
        <ul class="sub">
          <li><a href="#">サブメニューA</a></li>
          <li><a href="#">サブメニューA</a></li>
          <li><a href="#">サブメニューA</a></li>
        </ul>
      </li>
      <li><a href="#">メニューB</a>
        <ul class="sub">
          <li><a href="#">サブメニューB</a></li>
          <li><a href="#">サブメニューB</a></li>
          <li><a href="#">サブメニューB</a></li>
        </ul>
      </li>
      <li><a href="#">メニューC</a>
        <ul class="sub">
          <li><a href="#">サブメニューC</a></li>
          <li><a href="#">サブメニューC</a></li>
          <li><a href="#">サブメニューC</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>

注意事項とか重要なことはコード内のコメントとして記述しておいたので参照されたし。

次！多階層ドロップダウンメニュー！やはりこれもここのCSSサンプルそのまま使用してもダメだったので注意されたし。。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <style type="text/css">
/* この全称セレクタの指定はサンプルになかった。。 */
*{
    padding:0; /* この指定がないとサブメニューがメニューとずれて表示される。 */
    list-style-type:none; /* この指定がないとリストの●が表示される。 */
}
ul.menu li{
    float:left;
    width:179px;
    height:48px;
    background:url("http://editors.ascii.jp/m-kobashigawa/jquery_sample/019/images/btn.png");
    position:relative;
}
ul.menu li a{
    display:block;
    width:100%;
    height:100%;
    line-height:48px;
    text-indent:30px;
    font-weight:bold;
    color:#CFDFB5;
    text-decoration:none;
    position:relative;
}
ul.menu li a:hover{
    background:url("http://editors.ascii.jp/m-kobashigawa/jquery_sample/019/images/btn_over.png");
}
ul.sub li{
    float:none;
}
ul.sub li ul.sub{
    position:absolute;
    left:179px;
    top:0;
}
ul.menu{
    zoom:1;
}
ul.menu:after {
    height:0;
    visibility:hidden;
    content:".";
    display:block;
    clear:both;
}


/* 以下、IE6とIE7のレイアウト機能のバグ対策。。 */
ul.sub{
    display:none;
}
* html ul.menu li{
    display:inline;
    zoom:1;
}
*+html ul.menu li{
    display:inline;
    zoom:1;
}
* html ul.sub{
    zoom:1;
    position:relative;
}
*+html ul.sub{
    zoom:1;
    position:relative;
}
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
    $(function(){
      $("ul.menu li").hover(function(){
        //ここは子セレクターを指定している。
        $(">ul:not(:animated)",this).slideDown("fast")
      },
      function(){
        //ここも子セレクター。
        $(">ul",this).slideUp("fast");
      })
    })
    </script>
  </head>
  <body>
    <ul class="menu">
      <li><a href="#">メニューA</a>
        <ul class="sub">
          <li><a href="#">サブメニューA</a></li>
          <li><a href="#">サブメニューA</a></li>
          <li><a href="#">サブメニューA</a>
            <ul class="sub">
              <li><a href="#">サブメニューA2</a></li>
              <li><a href="#">サブメニューA2</a></li>
              <li><a href="#">サブメニューA2</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">メニューB</a>
        <ul class="sub">
          <li><a href="#">サブメニューB</a></li>
          <li><a href="#">サブメニューB</a>
            <ul class="sub">
              <li><a href="#">サブメニューB2</a></li>
              <li><a href="#">サブメニューB2</a></li>
              <li><a href="#">サブメニューB2</a>
                <ul class="sub">
                  <li><a href="#">サブメニューB3</a></li>
                  <li><a href="#">サブメニューB3</a></li>
                  <li><a href="#">サブメニューB3</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">サブメニューB</a></li>
        </ul>
      </li>
      <li><a href="#">メニューC</a>
        <ul class="sub">
          <li><a href="#">サブメニューB</a>
            <ul class="sub">
              <li><a href="#">サブメニューC2</a></li>
              <li><a href="#">サブメニューC2</a></li>
              <li><a href="#">サブメニューC2</a></li>
            </ul>
          </li>
          <li><a href="#">サブメニューB</a></li>
          <li><a href="#">サブメニューB</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>

子セレクター使ってるのがミソな感じ。だけどそれ以外は別に難しいことしてないかな。