Webサイトの上部、ヘッダーにメニューを設けているサイトはたくさんありますが、ただ文字を並べているだけではインパクトが薄いかも知れません。そこで使われているのがメガメニューと呼ばれる巨大なメニューです。 今回紹介するmegamenu.jsはメガメニューを実現してくれるライブラリで、特にレスポンシブ対応なのがポイントとなっています。

megamenu.jsの使い方

こちらがデモです。

メニューをクリックするとこんな感じで多くの選択肢が表示されます。

少ない場合もあります。

さらに幅が狭い場合です。階層メニュー表示ができます。

＋をクリックするとメニューがドリルダウンできます。

幅が狭い時のメニューは一般的なハンバーガーアイコンを使ったものとなっています。画像を埋め込んだメニューは対応していないようですが、多くのサイトでは十分と言えるでしょう。

megamenu.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

megamenu.js - Last responsive megamenu you’ll ever need marioloncarek/megamenu-js: Last responsive megamenu you’ll ever need