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. Dynamic Table

    JavaScript

    スプレッドシートのようなテーブルを実装できるjQueryプラグイン「Dynamic Table」

    Dynamic Tableはスプレッドシートのような高機能なテーブルを…

  2. Tikslus Carousel
  3. Alton

    JavaScript

    コンテンツごとに縦スクロールでナビゲートできるjQueryプラグイン「Alton」

    Altonはコンテンツごとに縦スクロールすることによりWebページをナ…

  4. jQuery.sdFilterMe

    JavaScript

    コンテンツを並べ替えれるフィルタリング機能の実装「jQuery.sdFilterMe」

    jQuery.sdFilterMeは、ポートフォリオ、記事、ギャラリー…

  5. no-image

    JavaScript

    タッチフレンドリーでモバイルでも快適に動作する「simplelightbox」

    simplelightboxはレスポンシブ対応でタッチフレンドリーなl…

  6. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

最近の記事

  1. Kindle Oasis
  2. OWL-WDDESK01
  3. ワンタッチ着脱フィルターキット
  4. Soundcore Ace A1

アーカイブ

PAGE TOP