ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

幅広でメニューバー、幅狭ではプルダウンに変化させる

ウェブサイトのナビゲーションメニューを、「広い画面」では「メニューバー」の形に、「狭い画面」では「プルダウンメニュー」の形に自動で切り替える仕組みの作り方をご紹介。ul要素とli要素で作る「リスト」から「プルダウンメニュー」を自動生成してくれるスクリプト「tinynav.js」を活用すると、とても簡単です。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

狭い画面では「メニューバー」は表示しにくい

横幅が狭いと、横向きのメニューバーは、はみ出してしまう。

横幅が狭いと、横向きのメニューバーは、はみ出してしまう。

閲覧者の画面が広い場合でも狭い場合でも、単一のページで対応できるようにする「レスポンシブ・ウェブデザイン」を採用する際、ナビゲーション機能として掲載している「メニューバー」の扱いに困ることがあります。

横方向に広がる「メニューバー」を用意している場合、幅の狭い画面では、メニュー項目が横方向に突き出てしまうか、もしくはメニューが多段になってしまいます。

メニュー項目の横幅を狭くするにも限界がありますし、デザインの都合でメニューバーを多段構成にはしたくない場合もあるでしょう。

横向きのメニューと縦向きのプルダウンメニューを自動で切り替えて対処

ウインドウを狭めると、タブで表現されていた箇所が、プルダウンメニューに変わる

ウインドウを狭めると、タブで表現されていた箇所が、プルダウンメニューに変わる

この問題をうまく回避しているのが、例えば、SONY USAのウェブサイトです。このページを広い画面で閲覧すると、右図の左上のように、タブ形式で「SHOP」・「GAMING」・「ENTERTAINMENT」の3つのメニューが表示されます。しかし、狭い画面で閲覧すると(ウインドウ幅を狭めると)、右図の右下のように、プルダウンメニュー形式に切り替わります。

このように、メニューの表示形態そのものを、閲覧者の描画領域の横幅に応じて変化させれば、メニューが見にくくなる問題を回避できます。


 

メニューバーとプルダウンメニューを自動で切り替えるのに便利な「tinynav.js」

描画領域の横幅が一定以下の場合には、メニューバーがプルダウンメニューに自動変化する。

描画領域の横幅が一定以下の場合には、メニューバーがプルダウンメニューに自動変化する。

閲覧者の描画領域の横幅に応じて、表示形態を「メニューバー」と「プルダウンメニュー」に自動で切り替えるには、jQueryを利用したスクリプト「tinynav.js」を使うと便利です。

このスクリプトを活用すると、「ul要素」+「li要素」というシンプルなリスト形式で作ったHTMLを、プルダウンメニューの形に再構成して表示できます。


 
今回は、この「tinynav.js」を使って、レスポンシブ・ウェブデザインに対応したナビゲーションメニュー機能を作る方法をご紹介致します。

それではまずは、スクリプトをダウンロードして、必要最小限のソースを記述する方法から見ていきましょう。
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます