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

    JavaScript

    パスワードの強さを視覚的にフィードバックしてくれる「Complexify」

    Complexifyはユーザーが入力したパスワードの強さを視覚的にフィ…

  2. PIGNOSE-ParallaxSlider
  3. flexible-bootstrap-carousel
  4. Fitty

    JavaScript

    親コンテナにテキストをフィットさせられる「Fitty」

    Fittyはテキストをスケールアップ、またはスケールダウンして親コンテ…

  5. TextFit

    JavaScript

    テキストをコンテナ幅にすばやくフィットさせる「TextFit」

    TextFitは、一行または複数行のテキストをコンテナ幅(オプションに…

  6. kissui.scrollanim

    JavaScript

    スクロールによる多彩なアニメーションを実装できる「kissui.scrollanim」

    kissui.scrollanimは、CSS3を活用したスクロールによ…

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP