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. Material ScrollTop Button
  2. fullPage.js

    JavaScript

    フルページでコンテンツごとにスクロールする「fullPage.js」

    fullPage.jsはフルページでコンテンツごとにスクロールするレス…

  3. 3D Portfolio Template

    JavaScript

    立体的に回転するテンプレート「3D Portfolio Template」

    滑らかに、立体的に回転するテンプレートを実装することができる「3D P…

  4. funnyText.js
  5. JavaScript

    値を指定することで好きなカラースウォッチを表示できるjQueryプラグイン「Color Swatch…

    これはどこかで使いたくなるjQueryプラグインですね。カラー値を指定…

  6. no-image

    JavaScript

    軽量・高速でレスポンシブ対応のjQueryスライダー「partialViewSlider」

    partialViewSliderは左右にスライドする軽量・高速でレス…

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP