Hamburger Icon Menu

JavaScript

フルスクリーンメニューを表示させるハンバーガーアイコン「Hamburger Icon Menu」

Hamburger Icon Menuはメニューをフルスクリーンで表示させるハンバーガーアイコンを実装することができるスクリプトです。jQueryを必要とします。フルスクリーンメニューとハンバーガースタイルという2つのトレンドを組み合わせているのが特徴です。

Hamburger Icon Menu

Hamburger Icon Menu

上記のページでは右上にハンバーガーアイコンが設置されており、これをクリックするとフルスクリーンでメニューが表示されます。シンプルでとても見やすいメニューですね。

メニューはスライドダウンで降りてきて、表示されている間はハンバーガーのアイコンはバツ印になります。バツ印をクリックするとメニューがスライドアップされ、元の状態に戻ります。

ハンバーガーアイコンをクリックしないとメニューが表示されないので、「メニュー項目がたくさんあってゴチャゴチャするのがイヤだ」という人にはピッタリではないでしょうか。

使い方も簡単で、オプションもいくつか用意されています。

メニューをフルスクリーンで表示させるハンバーガーアイコンを設置したいという方は、ぜひHamburger Icon Menuをチェックしてみてください。

Turntable.js画像を使ってストップモーション動画のような効果を実装できる「Turntable.js」前のページ

Chromeで特定の(個別に)webサイトのCookieを削除するやり方次のページ特定のCookieを削除

関連記事

  1. Radial SVG Slider

    JavaScript

    放射状に切り替わるスライダーを実装できる「Radial SVG Slider」

    Radial SVG Sliderは、放射状に広がりながら切り替わるス…

  2. baffle.js

    JavaScript

    DOM要素内のテキストを難読化させて読めるようにする「baffle.js」

    baffle.jsは、DOM要素内のテキストを暗号化して難読化させ、さ…

  3. jQuery Responsive Thumbnail Gallery Plugin

    JavaScript

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQuery Responsive T…

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQue…

  4. intence

    JavaScript

    インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」

    intenceはスクロール中のエリアが分かるインタラクティブなナビゲー…

  5. VerticalShift

    JavaScript

    要素を縦長に並べてマウスオーバーで全部表示させるjQueryプラグイン「VerticalShift」…

    とても面白い見せ方だったのでご紹介します。要素を縦長に並べてマウスオー…

  6. OverlayScrollbars

最近の記事

  1. EOS RP
  2. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  3. スターバックス ハシエンダ アルサシア
  4. イングリッシュマフィン

アーカイブ

PAGE TOP