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

関連記事

  1. Material Design Responsive Table
  2. jQuery Parallax

    JavaScript

    美しいパララックススクロールエフェクトを実装できる「jQuery Parallax」

    jQuery Parallaxは美しいパララックススクロールエフェクト…

  3. jQuery liMarquee
  4. jQueryを使わないコード集

    JavaScript

    jQueryを使わないでコードを書くTips集

    jQueryを使えば簡単にできることがたくさんあるんですが、ちょっとし…

  5. no-image

    JavaScript

    手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」

    simpleParallaxは、手軽にパララックス効果を画像に実装する…

  6. Zoomerang.js

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP