外部ライブラリ非依存のレスポンシブメニュー「Responsive Nav」
Responsive NavはJavaScript製のオープンソース・ソフトウェア（MIT License）です。
Webサイトにおいてメニュー機能をどう実装するか悩んだら使ってみたいのがResponsive Navです。レスポンシブなメニュー機能を提供してくれます。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.13.38.1379848269.png)
デスクトップサイズの場合。左側に表示されます。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.14.05.1379848277.png)
スマートフォンサイズまで縮めた場合。右上に移動します。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.14.09.1379848287.png)
クリックすると上にメニューが表示されます。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.15.47.1379848292.png)
別なデモ。上にメニュー項目が並んでいます。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.15.53.1379848296.png)
スマートフォンサイズの場合は変わらず。
Responsive Navの特徴は外部ライブラリ非依存、CSS3によるアニメーション、タッチイベントサポート、タップした際の300msの遅延を排除、JavaScriptがオフでも動作、IE6以上からのサポートとなっています。
MOONGIFTはこう見る
WebサイトにおいてJavaScriptの利用が当たり前になっています。それだけに逆にJavaScriptをオフにしている場合においても適切に表示されるような工夫は必要かも知れません。CSS3だけでアニメーションをしようと思ったらクリックでチェックボックスを有効にしてアニメーションを実行するのが良いようです。
JavaScriptに頼りすぎた実装は、使えない状態においてユーザビリティを低くします。また、クローラーに対して適切なコンテンツ配信ができない場合があります。全ての機能がJavaScriptを使えない状態で実現できる必要はありませんが、同様の操作はできるようになっているべきではないでしょうか。
Responsive Nav — Responsive Navigation Plugin