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

2015/12/24 サイト制作, 技術系 投稿者:竹内

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

そこで今回は、レスポンシブ対応に最適な
『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つの手法」の一連の流れがご紹介できたと思います。
今回は紹介していない部分で、細かいひと手間やちょっとした工夫でスマートフォンでの見やすさ、操作のしやすさが変わってくると思います。
スマートフォン対応に限らず、手間や工夫を惜しまずより良いホームページ作りを行っていければと思います。

カレンダー

      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)