ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Responsive NavはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Webサイトにおいてメニュー機能をどう実装するか悩んだら使ってみたいのがResponsive Navです。レスポンシブなメニュー機能を提供してくれます。


デスクトップサイズの場合。左側に表示されます。


スマートフォンサイズまで縮めた場合。右上に移動します。


クリックすると上にメニューが表示されます。


別なデモ。上にメニュー項目が並んでいます。


スマートフォンサイズの場合は変わらず。

Responsive Navの特徴は外部ライブラリ非依存、CSS3によるアニメーション、タッチイベントサポート、タップした際の300msの遅延を排除、JavaScriptがオフでも動作、IE6以上からのサポートとなっています。


MOONGIFTはこう見る

WebサイトにおいてJavaScriptの利用が当たり前になっています。それだけに逆にJavaScriptをオフにしている場合においても適切に表示されるような工夫は必要かも知れません。CSS3だけでアニメーションをしようと思ったらクリックでチェックボックスを有効にしてアニメーションを実行するのが良いようです。

JavaScriptに頼りすぎた実装は、使えない状態においてユーザビリティを低くします。また、クローラーに対して適切なコンテンツ配信ができない場合があります。全ての機能がJavaScriptを使えない状態で実現できる必要はありませんが、同様の操作はできるようになっているべきではないでしょうか。

Responsive Nav — Responsive Navigation Plugin

Responsive Nav · Advanced Left Navigation Demo

viljamis/responsive-nav.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2