Nedia What's up!

ネディアのエンジニアによるIT技術やサービスの紹介・検証などをお届け!

jQueryを使った折りたたみ式のグローバルメニュー

前回はメディアクエリを使用して『既存のホームページをレスポンシブスマホ対応する方法』をご紹介しました。
レスポンシブデザインによるスマホ対応の大まかな流れがつかめたと思います。

そこで今回は、レスポンシブ対応に最適な
『jQueryを使った折りたたみ式のグローバルメニュー』についてご紹介いたします。

グローバルメニュー実装の要件

PC用のレイアウトでは既存のグローバルメニューを使い、スマートフォンで表示した場合には折りたたみ式のグローバルメニューを使うようにする。

既存のホームページをレスポンシブデザインにてスマートフォンに変える事を目的としていますので、PC用のレイアウトでは既存のものをそのまま使います。
(場合によってはPC用レイアウトも含めて作り直してしまう方が良い場合もあります。)

また、グローバルメニューが3つ、4つ程度であればスマートフォン用に並び替えるだけで対応できると思います。

jQueryのグローバルメニュー実装その1

HTML内にScriptファイルを設定する

index.htmlに記述

HTMLにjQueryのファイルとtool.jsのファイルを読み込む記述を追加します。

 

tool.jsを作成する

tool.jsの中身を設定します。

jQueryのグローバルメニュー実装その2

HTMLにスマートフォン用グローバルメニューを設置する

index.htmlに記述

HTML内に既存のメニューとは別にスマートフォン用のグローバルメニューを追加し、既存のメニューに.navigationのclass指定をし、
スマートフォン用メニューは

でくくります。

jQueryのグローバルメニュー実装その3

CSSを設定し完成!

style.cssに追記する


最後にCSSの設定をします。ここでのポイントは、
PC用のグローバルメニューとスマートフォン用のグローバルメニューを2つ用意し、それぞれの画面解像度にあわせて表示/非表示を切り替える部分です。

2つ用意した理由として、

  • PC用のレイアウトを全く変更すること無くスマートフォン用のメニューを設置できる。
  • スマートフォン用のメニューの数や項目名を柔軟に変更・追加できる。

事があげられます。
例として、上記の場合ではスマートフォン用のメニューに「お問い合わせ」の項目を追加しています。

まとめ

前回と今回の記事でスマートフォン対応の「とある1つの手法」の一連の流れがご紹介できたと思います。
今回は紹介していない部分で、細かいひと手間やちょっとした工夫でスマートフォンでの見やすさ、操作のしやすさが変わってくると思います。
スマートフォン対応に限らず、手間や工夫を惜しまずより良いホームページ作りを行っていければと思います。