簡単に多階層レスポンシブメニューを実装できるjQuery「meanmenu.js」

   2017年5月12日

元のhtmlをあまり複雑に触らずにPC表示とスマホ表示で切り替わる
レスポンシブメニューが実装できたらどんなに楽なんだろう~と思っていたときに
見つけたのがこれから紹介する「meanmenu.js」です。

使い方はとてもシンプルなので、どんなサイトでも使いやすいです。

使い方

まずはmeanmenu.jsをダウンロード。
下記からダウンロードできます。

MeanThemes | MeanMenu

MeanMenu Demo

viewport/css

viewportを指定してレスポンシブに適用させます。
meanmenu.cssを読み込みます。
ファイルの階層はそれぞれの環境に合わせて変更してください。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Title</title>
<link rel="stylesheet" href="./css/meanmenu.css" />
</head>

HTML

HTMLは共通で良いので、お好きな書き方でOKです。
多階層メニューにしたい場合は、liタグの中にさらにulを入れることによって
自動的に「+」ボタンが表示され、それを押すことによって開くようになっています。


<nav>
<ul>
<li><a href="#">Menu01</a></li>
<li>
<a href="#">Menu02</a>
<ul>
<li><a href="#">第2階層Menu01</a></li>
<li><a href="#">第2階層Menu02</a></li>
<li><a href="#">第2階層Menu03</a></li>
</ul>
</li>
<li><a href="#">Menu03</a></li>
<li><a href="#">Menu04</a></li>
<li><a href="#">Menu05</a></li>
</ul>
</nav>

javascript

jQuery本体とmeanmenu.jsを
読み込みます。


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

これでもう実装は完了です。
さらにjavascriptに以下を追加すると、カスタマイズもできます。

デフォルトではページ幅が480px以下になった時に、アコーディオンメニューを
生成するようになっておりますが、
meanScreenWidthの数値を変更することでブレイクポイントを変更することも可能です。


jQuery(document).ready(function () {
jQuery("nav").meanmenu({
meanMenuContainer: "", // メニューを表示させる位置
meanMenuClose: "x", // クローズボタン
meanMenuCloseSize: "18px", // クローズボタンのフォントサイズ
meanMenuOpen: "<span /><span /><span />", // 通常ボタン
meanRevealPosition: "right", // メニューボタンの表示位置
meanRevealColour: "", // 背景色
meanScreenWidth: "480" // ブレイクポイント
});
});

最後に

その他細かい見た目の調整等は、meanmenu.cssで調整してみてください。

ブレイクポイント以上のウィンドウサイズの場合、
メニューの見た目について指定されていませんので
すでにあるサイトをレスポンシブにするときにとっても便利ですよね!
自分用にカスタマイズできるので、お気に入りです。

web tipsの記事