ナビゲーションバーのドロップダウン実装

ナビゲーションメニューのドロップダウンの実装　

今回は、水平の横長のナビゲーションバーのメニューをhtm、jQueryでドロップダウンにしていく
他にもhtmlとcssだけでも出来ます、、
（今回cssは動きに関係無いので省略)

<ul class="header-Nav">
　　　　<li class="navigation__trigger">
　　　　　　　　<a>メニュー項目A</a>　　　　//今回の実装はメニュー名にリンク設定する想定
　　　　　　　　<ul class="navigation__dropdown">
　　　　　　　　　　　　<li></li>
　　　　　　　　　　　　<li></li>                            
      <li></li>
　　　　　　　　</ul>
  </li>
  <li class="navigation__trigger">
　　　　　　　　<a>メニュー項目B</a>
　　　　　　　　<ul class="navigation__dropdown">
　　　　　　　　　　　　<li></li>
　　　　　　　　　　　　<li></li>                            
      <li></li>
　　　　　　　　</ul>
  </li>
</ul>

//ナビゲーション　ドロップダウン
$(function() {
    'use strict';

    $('.navigation__dropdown').hide();
    $('.navigation__trigger').hover(
        function () {
            $(this).addClass('is-hover');
            $('.navigation__dropdown', this).fadeIn('fast');
        },
        function () {
            $(this).removeClass('is-hover');
            $('.navigation__dropdown', this).fadeOut('fast');
        }
    );
});

class="navigation__trigger"の要素に、マウスホバーすることで
そのメニュー項目の中のclass="navigation__dropdown"がフェイドインで表示されます。
マウスカーソルを外すとフェイドアウトで非表示になります。

さらに、この例ではhoverでメニュー項目に
$(this).addClass('is-hover');で追加
$(this).removeClass('is-hover');で削除が行われます。

toggleClass や fadeToggle を使えばもっと簡潔にかくこともできます。

$('.navigation__dropdown').hide();
$('.navigation__trigger').hover(
    function () {
        $(this).toggleClass('is-hover');
        $('.navigation__dropdown', this).fadeToggle('fast');
    }
}