Animated Toggle Menu

JavaScript

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

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

Animated Toggle Menu

デモ

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

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

Animated Toggle Menu

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

関連記事

  1. jQuery Waterwheel Carousel

    JavaScript

    水平や垂直方向に配置できる水車のような便利なカルーセル「jQuery Waterwheel Caro…

    水平方向や垂直方向に配置できる水車のような便利なカルーセル「jQuer…

  2. ToProgress

    JavaScript

    画面上部に軽量なプログレスバーを実装できる「ToProgress」

    ToProgressは画面上部にシンプルで軽量なプログレスバーを実装で…

  3. JavaScript

    シンプルでカスタマイズも簡単にできるjQueryプラグイン「Twitter Follow Box W…

    とてもシンプルでカスタマイズもしやすいjQueryプラグイン「Twit…

  4. Dependent / Cascading Select List with jQuery Select2

    JavaScript

    選択内容によりその下の内容も変化するセレクトボックス「Dependent / Cascading S…

    セレクトボックスを強力でカスタマイズ性が高く、そして充実させる人気のj…

  5. simpleSlideShow

    JavaScript

    カスタマイズしやすいシンプル・軽量なスライドショー「simpleSlideShow」

    simpleSlideShowは、シンプルで軽量なスライドショーを実装…

  6. t.js

    JavaScript

    タイプライターで文字を入力するようなテキストエフェクトのjQueryプラグイン「t.js」

    t.jsというjQueryプラグインを使えば、タイプライターで文字を入…

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ

Instagram始めました

Facebookページ

PAGE TOP