elmenuはレスポンシブに対応した軽量のハンバーガーメニューを実装することができるjQueryを活用したメニューシステムです。圧縮版で2KBほどと非常に軽いのでページの読み込みスピードを気にする人にはピッタリですね。
アイコンをクリックでナビゲーションをスライド表示
elmenuの実際のデモ動作は以下からチェックできます。
PC版ではナビゲーションが水平に並んでいます。ブラウザを縮小していくとわかると思いますが、モバイル版ではこのナビゲーションがハンバーガーメニューに変化します。
ハンバーガーメニューのアイコンをクリックすると、右からメニューがスライドで表示されます。メニューを閉じる場合は再度ハンバーガーメニューをクリックすればOKです。
また、デモのメニュー項目「Product 1」には子メニューも設置されていて、「Product 1」の横にある下矢印をクリックすると、子メニューがスライドで表示される仕組みになっています。
ちなみに、子メニューの「Product 1.1」にも子メニューが設定されています。
シンプルな操作性と見やすいデザインなので、PC・モバイルともに快適なナビゲーションを実装できるのではないでしょうか？
なによりファイル容量もとっても軽量なところがうれしいポイントですね。
モバイル版の場合はナビゲーションを見たいときだけハンバーガーメニューのアイコンをクリックすればいいので、スペースを有効に活用したいときには最適なナビゲーションといえそうです。
というわけで、レスポンシブ対応で軽量なハンバーガーメニューを実装したいという人は、ぜひ「elmenu」を活用してみてはいかがでしょうか？
elmenuのダウンロードや詳細については、以下のページからどうぞ。
