• かちびと.net

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

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

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

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

FlexNav


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

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

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

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

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

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

FlexNav

URL :
TRB :

Ads

Posts

Contact

Services