【jQuery】レスポンシブル対応のliタグナビゲーションメニュー

現在、とあるサイトを構築しておりまして、
その要件のひとつにレスポンシブルなサイト、というものがあります。

スマホやタブレットでのアクセスを考慮して、
ブラウザのサイズに合わせてメディアクエリーでCSSを振り分けています。

グローバルナビゲーションの個数が少し多め(8つくらい)で
一部サブメニューも持たせたい・・・

スマホやタブレットからのアクセスの時、
よく見かける三本線のメニューにしてしまうとタップ時に縦に長く伸びてカッコ悪い・・・
ドロップダウンにするのがベストかなと思って探していたときに出会ったライブラリ TinyNav.js が非常に便利でした。

TinyNav.js · Convert navigation to a select dropdown on small screen
TinyNav.js is a tiny jQuery plugin that automatically converts UL and OL navigation to a tiny select box on small screen.

使い方も非常にシンプルで全く難しくありません。

特に便利なのが、ulを入れ子にすればサブメニューも簡単に追加できること。

グローバルナビゲーションの要素が多めのサイトにオススメです。

コメント