2013年9月27日(金) 10時01分52秒 [仕事]

横幅の広い画面ではメニューバー、狭い画面ではプルダウンメニューに切り替えて表示されるナビを作る

ウェブサイトのナビゲーションメニューとして、横方向に広がる「メニューバー」がよく使われています。閲覧者の描画領域（ブラウザのウインドウ幅とか）が十分広い場合は、それでも問題ないんですが、スマートフォンのような横幅の狭い環境にも同時に対応しようとすると、横方向の空間が結構必要な「メニューバー」の掲載は厳しいです。

その場合の対処として、横幅の広い画面では「メニューバー」の形で表示するものの、横幅の狭い画面では「プルダウンメニュー」の形に切り替えて表示するという方法があります。

最近では、「メニューバー」は（横方向に広がるような装飾であっても）HTMLではul要素とli要素で作る「リスト」の形にするのがスタンダードだと思います。（そのままだと縦方向に箇条書きっぽく並ぶだけですが、CSSを使って横方向に並ぶ「バー」に装飾します。）

そんなul要素とli要素で作る「リスト」を元にして、「プルダウンメニュー」を自動生成してくれるスクリプト「tinynav.js」があります。これとCSSを組み合わせることで、幅の広い画面では「メニューバー」、狭い画面では「プルダウンメニュー」と自動で切り替わる仕組みが作れます。

そんな「tinynav.js」スクリプトの使用方法を、All Aboutで解説しました。

■幅広でメニューバー、幅狭ではプルダウンに変化させる（＠All About ホームページ作成）

レスポンシブWebデザインを採用しつつ、メニューバーも用意したい場合には便利だと思います。