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. Vertical Fixed Navigation #2
  2. Responsive Multi Menu
  3. Sidr

    JavaScript

    横からサイドメニューが現れるjQueryプラグイン「Sidr」

    面白いjQueryプラグインがあったのでメモがてらご紹介します。Sid…

  4. Material ScrollTop Button
  5. Salvattore
  6. Lettering.js

    JavaScript

    一文字ずつスタイルなどを調整できるようにしてくれる「Lettering.js」

    Lettering.jsは一文字ずつCSSなどでスタイルを調整できるよ…

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP