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. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり…

  3. Crosscover

    JavaScript

    多彩なアニメーションがいい!シンプルで使いやすいjQueryイメージカルーセル「Crosscover…

    Crosscoverはシンプルで多彩なアニメーションが魅力的なイメージ…

  4. animateClick

    JavaScript

    ボタンクリック時にアニメーションをつけれる「animateClick」

    animateClickはボタンをクリックしたときにアニメーションをつ…

  5. no-image

    JavaScript

    かっこいいニュース・バナースライドショー実装「jQuery News Slider」

    jQuery News Sliderは、かっこいいニュース・バナースラ…

  6. roll.js

    JavaScript

    スクロールによるページネーション、進捗度、ポジションなどの値を取得できる「roll.js」

    roll.jsはスクロールによるページネーション、進捗度、ポジションな…

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP