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. JavaScript

    アイコンをクリックすると周りにメニューが表示されるjQueryプラグイン「FerroMenu」

    FerroMenuというjQueryプラグインを使えばアイコンをクリッ…

  2. jQuery Accordion
  3. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  4. marginotes

    JavaScript

    テキストの余白に注釈をつけて読みやすい記事をつくれる「marginotes」

    marginotesは、クールなマージンノートを作成するjQueryプ…

  5. Tabulous.js

    JavaScript

    色々なエフェクトのタブパネルが実装できるjQueryプラグイン「Tabulous.js」

    素敵なタブパネルがあったのでメモがてらご紹介します。オプションを指定す…

  6. no-image

    JavaScript

    Bootstrap 4を使ったステッパープラグイン「bs-stepper」

    bs-stepperはBootstrap 4を使ったステッパーを実装で…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP