no-image

JavaScript

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

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

offcanvas-mobile-menu

デモ

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

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

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

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

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

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

EasyLoadingローディングアニメーションを手軽に実装できる「EasyLoading」前のページ

カスタマイズ性に優れたレーティング(星評価)実装「star-rating-svg」次のページstar-rating-svg

関連記事

  1. JavaScript

    Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

    Google マップをとても簡単に扱えるようにしてくれるgmaps.j…

  2. Excolo Slider

    JavaScript

    タッチにも対応しているシンプルなjQueryスライダー「Excolo Slider」

    タッチやマウススライドにも対応しているシンプルなjQueryスライダー…

  3. Tosrus

    JavaScript

    スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」

    TosrusというjQueryプラグインを使えば、スワイプやスクロール…

  4. Zoom Slider

    JavaScript

    ズーム機能を備えたシンプルなコンテンツスライダー「Zoom Slider」

    Zoom Sliderは奥行き感を演出したズーム機能を備えたシンプルな…

  5. Custom jQuery Lightbox

    JavaScript

    デザインや使い方がシンプルな「Custom jQuery Lightbox」

    Custom jQuery Lightboxはデザインや使い方がシンプ…

  6. JavaScript

    マルチレベルで操作性に優れたレスポンシブ対応のjQueryナビゲーション

    レスポンシブに対応したマルチレベルの便利なjQueryナビゲーションが…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP