jQuery-Simple-MobileMenu

JavaScript

シンプルで操作性もいいモバイルメニュー実装「jQuery-Simple-MobileMenu」

jQuery-Simple-MobileMenuは、シンプルで操作性も簡単なモバイルメニューを実装することができるjQueryプラグインです。スマホやタブレットなど、モバイルファーストなナビゲーションメニューを取り入れたいという人にはピッタリのjQueryプラグインですね。

jQuery-Simple-MobileMenu

デモ

デモページには、スマホの画像が表示されていて、その中にある右上のハンバーガーアイコンをクリックすると、スマホの画面がナビゲーションメニューに切り替わります。

横に矢印が付いているメニューをクリックすると、さらに下の階層にあるメニューが表示される仕組みです。多階層にも対応したナビゲーションメニューを実装できるので、メニューのリストがたくさんあるサイトにもピッタリですね。

ナビゲーションメニューが表示されている時は、ハンバーガーアイコンの部分が「×」のアイコンになっていて、ここを再度クリックすると、元のページに戻ります。

シンプルな操作性でサクっと目的のメニューまでアクセスできるので、スマホなどのモバイル端末には最適なナビゲーションメニューといえます。

使い方も簡単なので、手軽に実装できるところもグッドです。また、オプションもいくつか用意されているのでちょっとしたカスタマイズなんかも可能です。

主なオプションは、submenuClass、hamburgerId、wrapperClassです。デフォルト値は、submenuClassがsubmenu、hamburgerIdがsm_menu_ham、wrapperClassがsm_menu_outerになっています。

そのほか、onMenuLoadとonMenuToggleといったコールバックの設定もできます。

jQuery-Simple-MobileMenu

no-imageコンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」前のページ

多彩な画像処理ができるJSライブラリ「Lena.js」次のページLena.js

関連記事

  1. jQueryプラグイン

    JavaScript

    jQueryプラグイン・2014年下半期70選まとめ

    今年も残すところ後わずかとなってしまいました。というわけで、2014年…

  2. roll.js

    JavaScript

    スクロールによるページネーション、進捗度、ポジションなどの値を取得できる「roll.js」

    roll.jsはスクロールによるページネーション、進捗度、ポジションな…

  3. JavaScript

    jQueryプラグイン・2014年上半期56選まとめ

    気づいたら2014年も上半期が終わってしまいましたね。そんなわけで、2…

  4. SimpleAccordion

    JavaScript

    シンプルなアコーディオンを実装できるjQueryプラグイン「SimpleAccordion」

    SimpleAccordionは、シンプルなアコーディオンを実装するこ…

  5. jQuery Responsive Tabs

最近の記事

  1. スターバックス ハウスブレンド
  2. Anker PowerHouse 100
  3. ミニミニ温度計(シルバー)

アーカイブ

PAGE TOP