no-image

JavaScript

シンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」

offcanvas-mobile-menuは、シンプルでモバイルフレンドリーなナビゲーションメニューを実装することができるjQueryプラグインです。横からスライドアニメーションでメニューが表示・非表示されます。

offcanvas-mobile-menu

デモ

デモでは画面右上に「trigger menu」と書かれたボタンが設置されていて、ここをクリックすると右側からナビゲーションメニューがスライドアニメーションとともに表示されます。

再度、trigger menuボタンをクリックすると、今度はメニューがスライドアニメーションとともに非表示になる仕組みです。

ユーザーによるアクションがないとメニューが表示されないので、通常時は画面全体がスッキリしますね。アニメーションも無駄な動きがなく、サッと表示・非表示されるのでストレスない操作性を実現しています。

また、マークアップや使い方もとてもシンプルなので手軽に実装できるのがグッドです。

オプションには、menuTrigger、position、speed、widthの項目が用意されています。シンプルながらも、オプションによるちょっとしたカスタマイズが可能です。

というわけで、モバイルフレンドリーなナビゲーションメニューを実装したい人は、ぜひ「offcanvas-mobile-menu」を活用されてみてはいかがでしょうか?

関連記事

  1. FlexNav

    JavaScript

    見た目もシンプルでレスポンシブ対応のナビゲーションメニューを実装できるjQueryプラグイン「Fle…

    シンプルなデザインでレスポンシブにも対応したナビゲーションメニューを実…

  2. OverlayScrollbars
  3. Jquery-Slider

    JavaScript

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

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

  4. no-image
  5. PIGNOSE Calendar

    JavaScript

    美しくてシンプルに使えるデートピッカー実装「PIGNOSE Calendar」

    PIGNOSE Calendarは、美しくてシンプルな操作性によるデー…

  6. MoveTo

    JavaScript

    軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」

    MoveToは軽量(圧縮版で1KBほど)なスムーススクロールを実装する…

最近の記事

  1. LE エルイー 6 PANEL CAP
  2. タリーズ ハウスブレンド
  3. BAG-TW1BKシリーズ
  4. 落ち葉と雪

アーカイブ

PAGE TOP