スマホ用メニューを作成する時によく使っているのがjQuery pluginのmmenu
あまりjQuery詳しくない私でも簡単に使えるところが気に入ってます。
オプションで色々設定もできるみたいなので、初心者から上級者まで使える便利なプラグインではないかな～と思います。
mmenuの使い方
1.まずは以下のサイトからcssとjsファイルをダウンロードします。
[mmenu]スマホ用メニューに便利なjQuery plugin
jQueryの読み込みも必要ですので、以下サイトよりダウンロードしてください。
jquery
私が使うファイルは2つ。
・jquery.mmenu.all.css
・jquery.mmenu.all.js
2.ファイルのダウンロードが終わったら、cssファイルとjsファイルをページに読み込みさせます。
先にjQueryを読み込んでからjquery.mmenu.all.jsの読み込みをして下さい。
順番が違うとうまく動きません。
■head内に記述
|
1 2 3 |
<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> |
3.ファイルの読み込みが終わったらスマホ用メニューを作成します。
■html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> |
4.メニューの作成が終わったらjsファイルにmmenu実行の命令をかきます。
基本の記述はこれだけ。
■jsファイル(base.jsでもmain.jsでも任意の名前をつけてこのファイルも読み込みます。)
|
1 2 3 4 5 6 |
$(document).ready(function() { $("#menu").mmenu({ *オプションはここに記述 } }); }); |
ページをアップして完了です。動作確認して下さい。
