シンプルで使いやすそうだったので
備忘録。Media Queriesと併用して、
ナビゲーションリンクをselect要素
に変換するjQueryのプラグインです。
圧縮版だと300バイトほどと、超軽量で、
様々なブラウザにも対応できるので
覚えておこうと思います。
ウィンドウサイズが設定したブレークポイントに達するとli要素で作ったナビゲーションがselect要素に変わってくれるので、スマフォのような幅の狭いデバイスでもスペースを取らずにナビゲーションを配置できます。
TinyNav.js
通常のナビゲーションが、スマフォでは自動でselect要素タイプのナビゲーションになってくれる、というライブラリ。
場所も取りませんし、ユーザーも使いやすいし、余計なCSSを書く必要も無くなります。圧縮版だと300KBほどと超軽量みたいです。
以下のブラウザに対応できるみたい。
- IE 6,7,8,9
- Firefox 6,8
- Safari 5
- Chrome 15
- Opera 11.5
- iOS Safari
- Opera Mobile 10.1
- Opera Mini for iOS
- IE7 Mobile
- Firefox Mobile
- Android browser
- Kindle browser
ですが、IETesterでは、6~8では確認出来ませんでした。IE9では動作しました。正直IEは対応してなくて構わないんですが、念のため他のブラウザも確認した方が良さそうですね。
コード
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></ script > < script src = "tinynav.min.js" ></ script > < script > $(function () { $('#foo').tinyNav({ active: 'selected' }); }); </ script > |
本体とプラグインを読み込んでセレクタを指定します。
ライブラリでtinynavというclass名が付加されますので、Media Queriesには、以下のセレクタを書く必要があります。
@media screen and ( max-width : 600px ) { .tinynav { display : block } #foo { display : none } } |
マークアップは普通で平気です。
< ul id = "foo" > < li >< a href = "foo.html" >List 01</ a ></ li > < li class = "selected" >< a href = "bar.html" >List 02</ a ></ li > < li >< a href = "hoge.html" >List 03</ a ></ li > < li >< a href = "huga.html" >List 04</ a ></ li > </ ul > |
ご利用とデモは以下よりどうぞ。