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. JavaScript

    アイコンをクリックすると周りにメニューが表示されるjQueryプラグイン「FerroMenu」

    FerroMenuというjQueryプラグインを使えばアイコンをクリッ…

  2. Viewer

    JavaScript

    画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」

    Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を…

  3. no-image
  4. jquery.stepper.js

    JavaScript

    マウス操作で値の増減ができるjQueryプラグイン「jquery.stepper.js」

    jquery.stepper.jsは、マウス操作から手軽に値の増減を行…

  5. Scrollgress

    JavaScript

    スクロールに連動するプログレスバーを実装できる「Scrollgress」

    Scrollgressはスクロールに連動するシンプルで軽量なプログレス…

  6. Circliful

    JavaScript

    円グラフで統計情報を伝えたい時に役立つjQueryプラグイン「Circliful」

    CirclifulというjQueryプラグインを使えば、統計情報を伝え…

最近の記事

  1. Anker PowerPort 5-in-1 37.5W Hub
  2. α7C + FE28-60mm F4-5.6
  3. Apple Watch Series 6
  4. iPad Air

アーカイブ

PAGE TOP