レスポンシブメニューを作成できるjQueryプラグイン｢MeanMenu｣

サイトをPC・タブレット・スマートフォンなどの端末に対応するためにナビゲーションメニューをレスポンシブ対応しました。その時採用したjQueryプラグイン｢MeanMenu｣をご紹介します。

必要なファイルと詳細はコチラ

下記リンク先からJavaScriptファイルやその他ファイルをダウンロードして下さい。

MeanMenu
MeanMenuのデモサイトはコチラ

ダウンロードファイルの使用方法

ナビゲーションメニューの表示に必要なコードは非常にシンプルです。

header

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>MeanMenu Demo</title>

<link rel="stylesheet" href="meanmenu.css" />

</head>

body

<body>

<header>
<nav>
<ul>
  <li><a href="#">Top Level Link</a>
    <ul>
      <li><a href="#">Second Level Link</a>
        <ul>
            <li><a href="#">Third Level Link</a></li>
            <li><a href="#">Third Level Link</a></li>
            <li><a href="#">Third Level Link</a>
                <ul>
                    <li><a href="#">Fourth Level Link</a></li>
                    <li><a href="#">Fourth Level Link</a></li>
                    <li><a href="#">Fourth Level Link with extra long name so it wraps</a>
                        <ul>
                            <li><a href="#">Fifth Level Link</a></li>
                            <li><a href="#">Fifth Level Link</a></li>
                            <li><a href="#">Fifth Level Link</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
      </li>
      <li><a href="#">Second Level Link</a></li>
      <li><a href="#">Second Level Link</a></li>
    </ul>
  </li>
  <li><a href="#">Top Level Link</a></li>
  <li><a href="#">Top Level Link</a></li>
  <li><a href="#">Top Level Link</a></li>
</ul>
</nav>
</header>
</body>
</html>

javascript

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="jquery.meanmenu.js"></script> 
<script>
$(document).ready(function() {
$('nav').meanmenu();
});
</script>

下記のコードをjavascriptに追加すると調整が可能になります。

$('nav').meanmenu({
    meanMenuClose: "x", // クローズボタン
    meanMenuCloseSize: "18px", // クローズボタンのフォントサイズ
    meanMenuOpen: "<span /><span /><span />", // 通常ボタン
    meanRevealPosition: "right", // 表示位置
    meanRevealColour: "", // 背景色
    meanScreenWidth: "480", // 表示させるウィンドウサイズ(ブレイクポイント)
});

jQueryプラグイン｢MeanMenu｣のデモサイト

jQueryプラグイン｢MeanMenu｣はメニューに階層構造を設けているので表示数が多くても対応できるのが利点です。またCSSスタイルでデザインカスタマイズも変更しやすく、使い勝手がいいのでレスポンシブでのメニュー作成を検討されているのであればお勧めです。