swipe-menu-js

JavaScript

横からスライド・スワイプ表示するハンバーガーメニュー実装「swipe-menu-js」

swipe-menu-jsは横からスライド・スワイプ表示するシンプルなハンバーガーメニューを実装できます。jQueryが使われていて、使い方やマークアップも簡単に記述できるので手軽に使用できるのがいいですね。

swipe-menu-js

デモ

デモは全部で3つ用意されています。Menu 1(Slide menu with hover effect)、Menu 2(Slide menu with jQuery)、Menu 3(Swipe menu with jQuery)です。

どれも画面左上にハンバーガーアイコンが表示されていて、ここからナビゲーションメニューを展開できるようになっています。

Menu 1ではハンバーガーアイコンにホバーするだけでメニューが横からスライドで開かれます。閉じる場合はメニュー外にマウスを持ってくればOKです。

一方、Menu2はハンバーガーアイコンをクリックすることでメニューを開閉できるのが特徴です。この場合、メニューが開かれている場合はハンバーガーアイコンの場所がバツ印になるので、ここをクリックするとメニューが閉じます。メニューの表示・非表示はMenu 1と同様にスライドアニメーションで行われます。

Menu 3はMenu 2と同じようにハンバーガーアイコンをクリックしてメニューを開きますが、異なるのはスライドではなくスワイプ表示する点です。Menu 1とMenu 2ではコンテンツ部分にメニューが重なるかたちで表示されますが、Menu 3ではメニューが横から出てくると同時にコンテンツ部分も横へ押し出されます。

swipe-menu-js

no-imageMacでデスクトップ毎にアプリを割り当てる(固定する)設定方法前のページ

レスポンシブ対応の超軽量なjQueryイメージスライダー「tinyslide」次のページno-image

関連記事

  1. gridslide.js

    JavaScript

    いろんな方向に画像をスライドできるjQueryイメージスライダー「gridslide.js」

    gridslide.jsはいろんな方向に画像をスライドさせることができ…

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

    JavaScript

    jQueryの基本的なanimateメソッドを使って適当に遊んでみる

    jQueryのanimateメソッドを使えば自分で好きなようにアニメー…

  3. js-offcanvas

    JavaScript

    上下左右にオフキャンバスのナビゲーションを実装できる「js-offcanvas」

    js-offcanvasは、上下左右にオフキャンバスのナビゲーションを…

  4. timedropper

    JavaScript

    時刻を指定しやすくしてくれるjQueryのタイムピッカー「timedropper」

    timedropperは時刻の指定をしやすいUIを実装できるjQuer…

  5. Bootstrap Show Password
  6. dndod

    JavaScript

    依存性のないシンプルで簡単なモーダルライブラリ「dndod」

    dndodはjQueryなどへの依存性のないシンプルで簡単なJavaS…

最近の記事

  1. WiMAX
  2. 甘柿
  3. 冬用のふとん
PAGE TOP