no-image

JavaScript

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

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

Slide Out Navigation Menu

Slide Out Navigation Menu

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

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

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

no-imageLightbox風のYouTubeフルスクリーンビデオを作れるjQueryプラグイン「YU2FLV」前のページ

マウスの動作に連動するシャドウエフェクト実装「Jquery Shadow Plugin」次のページno-image

関連記事

  1. no-image
  2. Timeline.js

    JavaScript

    スライド式のタイムラインを実装できるjQueryプラグイン「Timeline.js」

    Timeline.jsは、スライド式によるタイムラインを実装することが…

  3. JavaScript

    jQueryの基本的なセレクターを適当に試してみる

    自分の勉強用としてちょっと適当に試してみました。jQueryの基本のセ…

  4. JavaScript

    ライトボックスみたいなお洒落なアラートを出してカスタマイズもできるjQuery uLightBox …

    ライトボックスみたいなお洒落なアラートを表示させることができるjQue…

  5. overhang.jp

    JavaScript

    シンプルでクールな通知バーを実装できるjQueryプラグイン「overhang.jp」

    overhang.jsは、通知バーを実装するためのjQueryプラグイ…

最近の記事

  1. MRW-G1
  2. 桜と太陽
  3. ベルボン Mシリーズ
  4. ネック冷却ファン NRF10
  5. Kindle 8GBモデル

アーカイブ

PAGE TOP