スマホ用メニューを作成する時によく使っているのがjQuery pluginのmmenu
あまりjQuery詳しくない私でも簡単に使えるところが気に入ってます。
オプションで色々設定もできるみたいなので、初心者から上級者まで使える便利なプラグインではないかな~と思います。
mmenuの使い方
まずは以下のサイトからcssとjsファイルをダウンロードします。
[mmenu]スマホ用メニューに便利なjQuery plugin
jQueryの読み込みも必要ですので、以下サイトよりダウンロードしてください。
jquery
私が使うファイルは2つ。
・jquery.mmenu.all.css
・jquery.mmenu.all.js
ファイルのダウンロードが終わったら、cssファイルとjsファイルをページに読み込みさせます。
先にjQueryを読み込んでからjquery.mmenu.all.jsの読み込みをして下さい。
順番が違うとうまく動きません。
■head内に記述</p
<link type="text/css" rel="stylesheet" href="/css/jquery.mmenu.all.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/js/jquery.mmenu.all.js"></script>
ファイルの読み込みが終わったらスマホ用メニューを作成します。
■html
<nav id="menu">
<ul>
<li>menu</li>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
<li>menu02
<ul>
<li><a href="#">メニュー02-1</a></li>
<li><a href="#">メニュー02-2</a></li>
</ul>
</li>
</ul>
</nav>
メニューの作成が終わったらjsファイルにmmenu実行の命令をかきます。
基本の記述はこれだけ。
■jsファイル(base.jsでもmain.jsでも任意の名前をつけてこのファイルも読み込みます。)
$(document).ready(function() {
$("#menu").mmenu({
*オプションはここに記述
}
});
});
ページをアップして完了です。
動作確認して下さい。