何もないけどヨロシク。JSで書かれたスマホメニュープラグイン「mmenu.js」2020年05月07日コーディングスマホメニュープラグイン「mmenu.js」がとても便利で簡単なのでご紹介。IndexTogglemmenu.jsとはダウンロード使い方ファイルを読み込むhtmlの記述プラグインを実行させるための記述オプションデフォルト右からメニューをスライドスライドのテーマカラーをダークにするメニューに子階層のメニューの数を表示させるメニュー表示時にコンテンツ部分を薄暗くするさいごにmmenu.jsとはスマホサイトでハンバーガーメニューをクリックすると横や上からメニューが表示されるようにするプラグインです。脱jQueryの流れから2019年3月にjQuery依存しないバージョンがリリースされたmmenu.js。現在のリリースされている最新バージョンは8.5。※2020年5月時点。豊富なオプションとアドオンダウンロードこちらからダウンロードしてサイトに下の2つのファイルを読み込ませるだけ。/>使い方1.ファイルを読み込むまず、mmenuの.jsと.cssファイルを読み込ませる。次にhtmlファイルに基本的なマークアップを追加します。このときidに「js-mmenu」と指定したメニュー部分がスマホ用のスライドメニューとなり、aタグでhrefに「#js-mmenu」とした要素がスライドメニューの開閉のトリガーとなるボタンになります。ダウンロードしたデフォルトの設定だと「≡」のハンバーガーメニューのcssがすでに適用されてるはず。ここでの注意点はheaderからfooterタグまですべてコンテンツを囲う親要素を必ず設ける必要があります。cssなど何も記述してない場合、不要なタグと思われ削除されてしまう可能性があるのでidやclassなどに「js-mmenu-wrap」など何の用途のタグなのかわかるようにしておくことがおすすめです。下のコードの4行目の「”#js-mmenu”」の部分が2で設定したidを指定します。2のid名と揃えれば任意の命名で大丈夫です。);</script>全部通すとこんな感じ。</body></html>オプションオプションはたくさんありすぎるのでよく使うものをいくつかピックアップ。);</script>demo基本的にはオプション機能でイメージに近い動きと見た目に近づけて、その後デザインの調整はカスタマイズ用のcssなどを用意して上書きするような形にした方がいいです。mmenu.cssを編集するのは良くないです。</body></html>さいごに基本しか説明してないですがもっと高機能なオプションが沢山ありアプリなどでも使えると思います。個人的にはjQueryに依存しなくなったのが嬉しい。無料で使用できるので機会があれば皆さんもぜひ使ってみてください。2020年05月07日コーディングnanimonaiプログラム書く方が楽しいデザイナーです。デザイン事務所→フリーランス→スタートアップ入社→フリーランス(現在)。更新しないのでブログは向いてないと思いつつなんとかやってます。よければTwitterのフォローもお願いします。【JavaScript】js-cookie.jsを使ってダークモード切り替ボタンを作る。