スマホは幅が狭いので横型のメニューは向かない。そこで基本的にはメニューを表示せずクリックした時にメニューがプルダウンすると言うものだ。
しかも、既存のメニューを置き換える形を取ってくれる。レシポンシブには便利だ。
slicknavで検索し、jquery.slicknav.min.js と slicknav.css を入手。
htmlのヘッダに
|
1 2 3 4 5 6 7 8 |
<script src="./js/jquery-1.9.1.min.js"></script> <link rel="stylesheet" href="./css/slicknav.css" /> <script src="./js/jquery.slicknav.min.js"></script> <script> $(function(){ $('#navigation').slicknav(); }); </script> |
を記述。（もちろんjsやcssの場所は任意だし、既存のメニューの場所も任意）
これだけでOKだ。
ただ、cssにこのメニューを表示する場合は以下を
|
1 2 3 |
nav{ display: none; } |
表示せず既存のメニューを表示する場合は以下を書いてやる。
|
1 2 3 4 5 6 |
nav{ display: block; } .slicknav_menu { display:none; } |
（ここではnavに#navigationがある形。もちろんここは任意）
