PCではマウスホバー、スマフォではタップで動作するレスポンシブなドロップダウンメニューを実装するjQueryプラグイン・FlexNav

レスポンシブWebデザイン対応サイト向けのドロップダウンメニューを実装する為のスクリプト・FlexNavのご紹介です。なかなか使い勝手も良さそうな印象でした。

PCサイトではマウスホバーによるドロップダウン、スマフォではタップで降りるコンパクトなメニューに切り替わります。

ネストされたメニューにも対応していますのでこのまま利用しても大丈夫・・かな。（まだ詳しく見てないです）

<ul class="flexnav" data-breakpoint="800"> 
　<li>Menu01</li>
　<li>Menu02</li>
</ul>

カスタムデータ属性でブレークポイントを設定します。em単位でもセッティングできるみたい。

$(".foo").flexNav({ 'transitionSpeed' : '0.4s', 'itemHeight': 50 });

降りてくるスピードなどはオプションで設定。

ライセンスは激緩ライセンスのWTFPLです。ご利用や動作デモは以下より。

FlexNav