シンプルで使いやすそうだったので
備忘録。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>

ご利用とデモは以下よりどうぞ。

TinyNav.js