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

    JavaScript

    ダイナミック(動的)で美しいシャドウを実装できるJSライブラリ「Shine」

    ShineというJavaScriptライブラリが素敵だったのでメモがて…

  2. pixelate.js
  3. Jquery-Slider

    JavaScript

    水平の画像タイムラインを実装できる「Jquery-Slider」

    Jquery-Sliderは水平の画像タイムラインを実装できるのが特徴…

  4. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

  5. Hover Carousel

    JavaScript

    超軽量なホバーカルーセルを実装できる「Hover Carousel」

    Hover Carouselは超軽量なホバーで動作するカルーセルを実装…

  6. no-image

    JavaScript

    背景にスクロールエフェクトを実装する「Physics-Based Background Scroll…

    背景に美しいスクロールエフェクトを実装する「Physics-Based…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP