超軽量＆IE対応のレスポンシブナビゲーションバー「responsive-nav.js」

これはいつか使えそうだと思ったので、備忘として書き残しておく。レスポンシブなナビゲーションバーが簡単に実装できるJSライブラリ。

レスポンシブWebデザインとは何かご存知だろうか。

レスポンシブWebデザイン（Responsive Web Design）は、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作できます。
レスポンシブWebデザインとは

最近はPCからよりもスマホからのアクセスの方が多かったりする。なので、スマホからでも読みやすいようにデザインすることはとても大事だ。で、レスポンシブWebサイトの中でもナビゲーションバーを提供するのがこの「responsive-nav.js」である。

responsive-nav.jsの特徴

超軽量

なんと1.7KBと超軽量（要gzip）。かつjQueryなどのその他ライブラリを読み込む必要がない。

IE6にも対応

IE6以上のメジャーなブラウザに対応している。こんな軽量なのにすごいな。

responsive-nav.jsの使い方

使い方は簡単。まずheadタグ内などで以下の2つを読み込む。

<link rel="stylesheet" href="responsive-nav.css">
<script src="responsive-nav.js"></script>

bodyタグ内で以下のようにマークアップ。ここがナビゲーションバーの内容になる。

<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>