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

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

  2. animateClick

    JavaScript

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

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

  3. JavaScript

    サムネイルをクリックして拡大画像が見れるレスポンシブ対応のjQuery画像ギャラリー「Superbo…

    綺麗に並んだサムネイル画像をクリックして拡大画像を見ることができるjQ…

  4. 2013年下半期jQueryプラグインまとめ

    JavaScript

    2013年下半期に紹介したjQueryプラグイン68選まとめ

    今年も残すところあとわずかとなりました。今年もたくさんのjQueryプ…

  5. Rainbow.js
  6. JavaScript

    ナビゲーションをレスポンシブデザインにしてくれるjQueryプラグイン「HorizontalNav」…

    覚えておくと便利そうだったのでメモがてらエントリーします。リスト化した…

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP