no-image

JavaScript

ナビゲーションメニューがスライドで表示される「Slide Out Navigation Menu」

Slide Out Navigation Menuはスライドしながら表示されるナビゲーションメニューを実装できます。ハンバーガーアイコンをクリックすることで、横(モバイルでは縦)にスーッとスライドしながら伸びていきます。

Slide Out Navigation Menu

Slide Out Navigation Menu

デモではハンバーガーアイコンの部分をクリックすると、左から右へナビゲーションメニューがスライド表示されます。シンプルな操作性で、メニューを表示させたい時だけクリックすればOKです。メニュー表示中はハンバーガーアイコンの部分がバツ印に切り替わります。再度ここをクリックすると、スライドしながらメニューが閉じられます。

また、画面の横幅を縮小していくと横向きになっていたナビゲーションメニューが縦向きに変化します。スマホなどモバイルでは縦向きの方がレイアウト的に合っているので、こういう仕様もうれしいポイントですね。

というわけで、スライド表示するナビゲーションメニューを実装したい人は、ぜひ「Slide Out Navigation Menu」をチェックしてみてください。

関連記事

  1. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  2. Responsive Elements
  3. no-image

    JavaScript

    オーバーレイによるシンプルなアラートを実装できるjQueryプラグイン「simplert」

    simplertはオーバーレイによるシンプルで美しいアラートを実装する…

  4. JavaScript

    シンプルでカスタマイズも簡単にできるjQueryプラグイン「Twitter Follow Box W…

    とてもシンプルでカスタマイズもしやすいjQueryプラグイン「Twit…

  5. Simple Lightbox
  6. Skippr

    JavaScript

    軽くて速いスライドショーを実装できるjQueryプラグイン「Skippr」

    SkipprというjQueryプラグインを使えば、軽くて速いスライドシ…

最近の記事

  1. オリジナルチキン6ピース
  2. 200-DGCAM019
  3. ハクバ GW-PRO RED フォトグローブプロ PL
  4. Soundcore Liberty Air 2

アーカイブ

PAGE TOP