li要素で作ったナビゲーションリンクを、Media Queriesで設定したブレークポイントでselect要素にする軽量ライブラリ・TinyNav.js

Ads
iPhone / iPad

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

タイトルとURLをコピーしました