ページ数やコンテンツが多いサイトだと、カテゴリーの階層が深くなり、導線の設置がどうしても多くなってしまいます。
導線の設置が分かりづらいと、ユーザーは目的のページにたどり着けない場合も。
そんな時はグローバルナビゲーションに導線をまとめることをおすすめします。
カテゴリ分けも分かりやすく、ページ全体がすっきりとまとまります。
このような表示領域を広く使ったドロップダウンメニューのことをメガメニューと呼びます。
そんなメガメニューが簡単に実装できるjQueryプラグイン「megamenu.js」の実装方法をご紹介します。
作成したデモはこちらです。
DEMO
GitHubからmegamenu.jsをダウンロードする
GitHubからmegamenu.jsをダウンロードします。
megamenu.js
画面右側の「Clone or download」のボタンを押して、「Download ZIP」を選んでください。
するとZipファイルのダウンロードが始まります。
HTML
<script src="css/style.css"></script> <script src="js/megamenu.js"></script> <div class="menu-container"> <div class="menu"> <ul> <li></li> <li></li> </ul> </div> </div>
ダウンロードしたCSS、JSファイルを読み込ませます。
liタグの中にテキストやリンクを設置していきます。
ダウンロードした中にはfontフォルダもありますが、必要であれば使用してください。
デモではFontAwesomeのフォントに変更しました。
.menu-containerのwidthを100%にすると、PCで画面幅のサイズになります。
デフォルトでスマホ最適化済ですので、サクっとレスポンシブ対応させたい方におすすめです。
少し調整するだけでスマートなメガメニューが完成しますので、ぜひお試しください。
DEMO