elmenu

JavaScript

レスポンシブ対応で軽量なハンバーガーメニューを実装できる「elmenu」

elmenuはレスポンシブに対応した軽量のハンバーガーメニューを実装することができるjQueryを活用したメニューシステムです。圧縮版で2KBほどと非常に軽いのでページの読み込みスピードを気にする人にはピッタリですね。

アイコンをクリックでナビゲーションをスライド表示

デモ

PC版ではナビゲーションが水平に並んでいます。ブラウザを縮小していくとわかると思いますが、モバイル版ではこのナビゲーションがハンバーガーメニューに変化します。

ハンバーガーメニューのアイコンをクリックすると、右からメニューがスライドで表示されます。メニューを閉じる場合は再度ハンバーガーメニューをクリックすればOKです。

また、デモのメニュー項目「Product 1」には子メニューも設置されていて、「Product 1」の横にある下矢印をクリックすると、子メニューがスライドで表示される仕組みになっています。

ちなみに、子メニューの「Product 1.1」にも子メニューが設定されています。

シンプルな操作性と見やすいデザインなので、PC・モバイルともに快適なナビゲーションを実装できるのではないでしょうか?

なによりファイル容量もとっても軽量なところがうれしいポイントですね。

モバイル版の場合はナビゲーションを見たいときだけハンバーガーメニューのアイコンをクリックすればいいので、スペースを有効に活用したいときには最適なナビゲーションといえそうです。

というわけで、レスポンシブ対応で軽量なハンバーガーメニューを実装したいという人は、ぜひ「elmenu」を活用してみてはいかがでしょうか?

elmenu

Linear Sliderシンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」前のページ

Webページに雪を美しく降らせる冬にピッタリのjQueryプラグイン「Flurry」次のページFlurry

関連記事

  1. Accessible Mega Menu
  2. zingtouch

    JavaScript

    タッチジェスチャーをカスタマイズできるJSライブラリ「zingtouch」

    Zingtouchは、タッチ対応のデバイスにおける基本的なジェスチャー…

  3. jQuery GoUp!

    JavaScript

    ページ上部にスクロール移動してくれる「jQuery GoUp!」

    jQuery GoUp!は、ページ上部にスクロール移動してくれるシンプ…

  4. VenoBox

    JavaScript

    画像・Google マップ・YouTubeなどを埋め込めるLightbox風jQueryプラグイン「…

    VenoBoxは色んなコンテンツを埋め込めるLightbox風jQue…

  5. zoomwall.js

    JavaScript

    高さを揃えたグリッドレイアウトのLightbox系イメージギャラリー「zoomwall.js」

    zoomwall.jsは高さを揃えたグリッドレイアウトを実装することが…

  6. Smooth Scroll behavior polyfill

最近の記事

  1. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  2. ライオン システマ 超コンパクト ふつう
  3. タリーズ ハムチーズ&サラダサンド
  4. クリニカのY字タイプのフロス
  5. 日和山公園の桜

アーカイブ

PAGE TOP