【JavaScript】スマホにだけ「mmenu.js」を適用させる方法
スマホメニュープラグイン「mmenu.js」でPCはスライドメニューにせず、スマホのときだけスライドにする方法。
この記事を読んでる人におすすめの書籍
Index
mmenu.jsの特徴
mmenuは適用させたい箇所(主にグローバルメニューだと思うが)を画面の横からスライドで出てくるようになるプラグイン。導入するとPCでグローバルメニューとして予め表示させておきたいメニューもスライドで隠れちゃうのでPC用とSP用で2つ記述してる人もいるのではないでしょうか。(いないか、、、汗)
mmenuのドキュメントにもPCではスライドを適用させないオプションが用意されているのでその設定方法をご紹介。ちなみにダウンロードできるファイルの中にはその設定のデモは用意されていない。
mmenu導入方法
以前導入方法を書いたのでこちらを参考にして下さい。
オプション設定
公式サイトでoffCanvasの解説を抜粋。
「offCanvas」アドオンは、メニューをオフキャンバスメニューとして開くことができるようにするもので、デフォルトではオンになっています。これをオフにしたり、動作をカスタマイズしたりするには、offCanvas のオプションと設定を変更します。
HTML
<body>
<div class="wrap">
<header class="header">
<nav id="my-mmenu">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</header>
...
</div>
</body>
JS
<script>
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu( "#my-menu", {
//ここに他のオプションを記述
offCanvas: {
}
}, {
offCanvas: {
clone:true
}
});
}
);
</script>下記のオプションを追加することで、スライドメニュー用のメニューがクローン(複製)されます。
{
offCanvas: {
}
}, {
offCanvas: {
clone:true
}
}cloneされたスライドメニューはBODYタグの直下に生成されるので、CSSだけでPCとSPの装飾の振り分けが可能になります。
オプション設定しcloneされたHTML構造
<body>
<!--ここから-->
<nav id="js-mmenu">
<ul>
<li></li>
</ul>
</nav>
<!--ここまでがoptionを追加したことによって生成される-->
<div class="wrap">
<header class="header">
<nav id="js-mmenu">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</header>
...
</div>
</body>そうなるとCSSも例えばこういった感じでPCとSPを振り分けができる。
PC用
.header{
nav{
//PC用のCSSを記述
}
}SP用
@media screen and (max-width: 767px) {
.header{
nav{
display:none;
}
}
nav{
//SP用のCSSを記述※PC用のCSSは全く影響されない。
}
}まとめ
「mmenu.js」は使いこなせると便利なので他のオプションなども試してもらえればと思います。
他にもよく使うオプションを見つけたら書いていきたいと思います。
今回参考にしたドキュメント
この記事を読んだ人におすすめの書籍
