制作のご相談はこちら
レスポンシブ対応、メガメニューを実装できるプラグイン「megamenu.js」の使い方

公開日 : 2018年03月20日

レスポンシブ対応、メガメニューを実装できるプラグイン「megamenu.js」の使い方


ページ数やコンテンツが多いサイトだと、カテゴリーの階層が深くなり、導線の設置がどうしても多くなってしまいます。
導線の設置が分かりづらいと、ユーザーは目的のページにたどり着けない場合も。

そんな時はグローバルナビゲーションに導線をまとめることをおすすめします。
カテゴリ分けも分かりやすく、ページ全体がすっきりとまとまります。

このような表示領域を広く使ったドロップダウンメニューのことをメガメニューと呼びます。
そんなメガメニューが簡単に実装できる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