【JavaScript】Vanilla JSで書かれたスマホメニュープラグイン「mmenu.js」
スマホメニュープラグイン「mmenu.js」がとても便利で簡単なのでご紹介。
Index
mmenu.jsとは
スマホサイトでハンバーガーメニューをクリックすると横や上からメニューが表示されるようにするプラグインです。
脱jQueryの流れから2019年3月にjQuery依存しないバージョンがリリースされたmmenu.js。
現在のリリースされている最新バージョンは8.5。※2020年5月時点。
特徴
- jQuery不要で美しいモバイルメニューが実装可能
- wordpressのプラグインも用意
- デザインのカスタマイズも可能
- 簡単で軽量
- 豊富なオプションとアドオン
ダウンロード
こちらからダウンロードしてサイトに下の2つのファイルを読み込ませるだけ。
JS
<script src="mmenu.min.js"></script>CSS
<link rel="stylesheet" href="mmenu.css" />使い方
1.ファイルを読み込む
まず、mmenuの.jsと.cssファイルを読み込ませる。
<!DOCTYPE html>
<html>
<head>
...
<link href="mmenu.css" rel="stylesheet" />
</head>
<body>
...
<script src="mmenu.min.js"></script>
</body>
</html>2.htmlの記述
次にhtmlファイルに基本的なマークアップを追加します。
このときidに「js-mmenu」と指定したメニュー部分がスマホ用のスライドメニューとなり、aタグでhrefに「#js-mmenu」とした要素がスライドメニューの開閉のトリガーとなるボタンになります。確かダウンロードしたデフォルトの設定だと「≡」のハンバーガーメニューのcssがすでに適用されてるはず。
ここでの注意点はheaderからfooterタグまですべてコンテンツを囲う親要素を必ず設ける必要があります。
cssなど何も記述してない場合、不要なタグと思われ削除されてしまう可能性があるのでidやclassなどに「js-mmenu-wrap」など何の用途のタグなのかわかるようにしておくことがおすすめです。
<body>
<div id="js-mmenu-wrap">
<header>
<a href="#js-mmenu"><span></span></a>
<nav id="js-mmenu">
<ul>
<li><a href="">item1</a></li>
<li><a href="">item2</a>
<ul>
<li><a href="">item2-1</a></li>
<li><a href="">item2-2</a></li>
<li><a href="">item2-3</a></li>
</ul>
</li>
<li><a href="">item3</a></li>
</ul>
</nav>
</header>
<main>
...
</main>
<footer>
...
</footer>
</div>
</body>3.プラグインを実行させるための記述
下のコードの4行目の「”#js-mmenu”」の部分が②で設定したidを指定します。②のid名と揃えれば任意の命名で大丈夫です。
<script>
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu( "#js-mmenu", {
// ここに設定を記述する
});
}
);
</script>全部通すとこんな感じ。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" />
<title></title>
<link href="mmenu.css" rel="stylesheet" />
</head>
<body>
<div id="js-mmenu-wrap">
<header>
<a href="#js-mmenu"><span></span></a>
<nav id="js-mmenu">
<ul>
<li><a href="">item1</a></li>
<li><a href="">item2</a>
<ul>
<li><a href="">item2-1</a></li>
<li><a href="">item2-2</a></li>
<li><a href="">item2-3</a></li>
</ul>
</li>
<li><a href="">item3</a></li>
</ul>
</nav>
</header>
<main>
...
</main>
<footer>
...
</footer>
</div>
<script src="mmenu.min.js"></script>
<script>
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu( "#js-mmenu", {
// ここに設定を記述する
});
}
);
</script>
</body>
</html>オプション
オプションはたくさんありすぎるのでよく使うものをいくつかピックアップ。
デフォルト
<script>
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu( "#js-mmenu");
}
);
</script>
右からメニューをスライド
<script>
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu( "#js-mmenu", {
"extensions": [
"position-right"
]
});
}
);
</script>
スライドのテーマカラーをダークにする
<script>
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu( "#js-mmenu", {
"extensions": [
"theme-black"
]
});
}
);
</script>
メニューに子階層のメニューの数を表示させる
<script>
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu( "#js-mmenu", {
"counters": true
});
}
);
</script>
メニュー表示時にコンテンツ部分を薄暗くする
<script>
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu( "#js-mmenu", {
"extensions": [
"pagedim-black"
]
});
}
);
</script>
基本的にはオプション機能でイメージに近い動きと見た目に近づけて、その後デザインの調整はカスタマイズ用のcssなどを用意して上書きするような形にした方がいいです。直接mmenu.cssを編集するのは良くないです。
<!DOCTYPE html>
<html>
<head>
...
<link href="mmenu.css" rel="stylesheet" />
<link href="mmenu-custom.css" rel="stylesheet" />//カスタム用のcssを読み込んで記述する
</head>
<body>
...
</body>
</html>さいごに
基本しか説明してないですがもっと高機能なオプションが沢山ありアプリなどでも使えると思います。
個人的にはjQueryに依存しなくなったのが嬉しい。。
有料プラグインですが個人利用、非営利目的なら無料で使用できるので機会があれば皆さんもぜひ使ってみてください。
