Animated Toggle Menu

JavaScript

シンプル・軽量で使い方も簡単なハンバーガーメニュー実装「Animated Toggle Menu」

Animated Toggle Menuは、シンプルでファイル容量も軽量、そして使い方も簡単なハンバーガーメニューを実装することができます。さりげないアニメーション付きで操作性もよく、スタイリッシュなハンバーガーメニューをWebサイトに取り入れたい人にはピッタリですね。

Animated Toggle Menu

デモ

デモでは、画面上部にハンバーガーアイコンが設置されていて、ここをクリックするとメニューが表示される仕組みです。メニュー表示中はハンバーガーアイコンはバツ印に切り替わり、背景にはオーバーレイがかかります。

バツ印をクリックすると、メニューが閉じられて元のハンバーガーアイコンに戻ります。デザイン・操作ともにシンプルでとても使いやすいメニューです。パソコンだけではなくスマホやタブレットとの相性もバッチリですね。

Animated Toggle Menu

というわけで、シンプル・軽量で手軽に実装することができるハンバーガーメニュー「Animated Toggle Menu」の紹介でした。ライセンスはMITになります。

関連記事

  1. no-image

    JavaScript

    ミニマルでダイナミックなLightboxプラグイン「darkbox.js」

    darkbox.jsはミニマルながらもダイナミックなLightbox風…

  2. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

  3. swingdrag

    JavaScript

    jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

    swingdragは、jQuery UIのドラッグ機能にスイング効果を…

  4. Adi.js

    JavaScript

    アドブロックを検知してくれる「Adi.js」

    Adi.jsはアドブロックを検知してくれるjQueryプラグインです。…

  5. Owl Carousel 2

    JavaScript

    美しいレスポンシブなカルーセルスライダーを実装できる「Owl Carousel 2」

    Owl Carousel 2は、美しいレスポンシブなカルーセルスライダ…

  6. jQueryを使わないコード集

    JavaScript

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

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

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP