読者です 読者をやめる 読者になる 読者になる

Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

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

Javascript ライブラリ

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

RESPONSIVE NAV


レスポンシブ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>


scriptタグ内は以下の1行のみ。

var navigation = responsiveNav("#nav");


これで最低限の機能は実装できた。試してみる。画面幅が640px以上ではナビゲーションを全て表示。


画面幅が640px未満だと、ナビゲーションは折りたたまれる。


後はCSSでデザインすればそれっぽくなる。オプションも用意されているので、公式サイトから確認してほしい。
レスポンシブWebデザインを検討している人は、ぜひ参考に。