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

関連記事

  1. jquery-base-slider
  2. Brusher

    JavaScript

    インタラクティブな背景を実装できる「Brusher」

    Brusherはインタラクティブな背景を実装できる軽量なJavaScr…

  3. flexImages

    JavaScript

    軽量でFlickrやGoogle画像検索のようなギャラリーのjQueryプラグイン「flexImag…

    flexImagesというjQueryプラグインを使えば、軽量でレスポ…

  4. SimpleCalculadora

    JavaScript

    シンプルでカスタマイズもできる電卓「SimpleCalculadora」

    SimpleCalculadoraはシンプルでCSS、オプションなどで…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  6. okzoom

    JavaScript

    レンズで拡大するように画像の細部をマウスオーバーでズームできる「okzoom」

    okzoomは画像細部をマウスオーバーでズームすることができるjQue…

最近の記事

  1. KMC-80BK
  2. 味噌ラーメン〜旨辛にんにく味噌〜
  3. STP-XH70
  4. 久保田城

Instagram始めました

Facebookページ

PAGE TOP