jQuery を使った簡単スライドメニュー

jQuery を使ってとってもシンプルにスライドメニューが作れます。
検索していろいろ探しても、サンプルばかりで基本的な構造がわからなかったり javascript が無駄に複雑だったりするのですが、親子構造をうまく利用すればこれだけすっきりとしたソースで実現できます。あとは CSS で各々デザインするだけ。

<ul id="slide_menu">
  <li><a href="#">親メニュー1</a>
    <ul>
      <li><a href="#">子メニュー1</a></li>
      <li><a href="#">子メニュー2</a></li>
      <li><a href="#">子メニュー3</a></li>
    </ul>
  </li>
  <li><a href="#">親メニュー2</a>
    <ul>
      <li><a href="#">子メニュー1</a></li>
      <li><a href="#">子メニュー2</a></li>
      <li><a href="#">子メニュー3</a></li>
    </ul>
  </li>
  <li><a href="#">親メニュー3</a>
    <ul>
      <li><a href="#">子メニュー1</a></li>
      <li><a href="#">子メニュー2</a></li>
      <li><a href="#">子メニュー3</a></li>
    </ul>
  </li>
</ul>

<script>
  $("#slide_menu li").hover(
    function(){
      $(this).children("ul").slideDown("fast");
    },
    function(){
      $(this).children("ul").slideUp("fast");
    }
  );
</script>

<style>
  #slide_menu:after {
    clear:both;
  }
  #slide_menu li {
    position: relative;
    float: left;
    width: 7em;
  }
  #slide_menu li ul {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
  }
</style>

かわのくんとは

Web系IT企業でプログラミングやマネジメントをしています。趣味で音楽を少々。

Youtubeでライブ動画配信中

Ustreamでライブ動画配信中

スマートフォン向けにPCサイトを自動変換(コンバート)する『CONV2SP』 CSS作成支援ツール『CSSツクール』