WordPress 固定ページの設計・スマホ対応
イギリス・ロンドンブリッジ
ホーム >  サイト作成手順 >  12.メニューの表示制御
Menu Open
Menu close

12.メニューの表示制御

768px以下の画面が小さい機器で表示したとき、出来るだけ画面を有効に使えるようサイドメニューを非表示にし、必要時に再表示する仕組みです。JavaScriptとCSSを利用して、制御しています。

1)ボタンの設置

以下のボタンは、6.主たるテンプレートの3)(2)サイドメニューで表記済みです。

旅行プランメニューの上部に設置しています。

1
2
3
4
<div id="sumaho_menu">
    <div id="sumaho_menu_open" onclick="display_yes()">Menu Open</div>
    <div id="sumaho_menu_close" onclick="display_close()">Menu close</div>
</div>
  • 行番
  • 説 明
  • 2
  • Menu Openをクリックしたとき、JavaScriptのdisplay_yes()関数を実行
  • 3
  • Menu Closeをクリックしたとき、JavaScriptのdisplay_close()関数を実行

(2)JavaScript関数の記述とアップロード

テキストエディターで以下を記述します。

1
2
3
4
5
6
7
8
9
10
11
function display_yes(){
  document.getElementById("side_menu_box").style.display="block";
  document.getElementById("sumaho_menu_close").style.display="block";
  document.getElementById("sumaho_menu_open").style.display="none";
}
function display_close(){
  document.getElementById("side_menu_box").style.display="none";
  document.getElementById("sumaho_menu_open").style.display="block";    
  document.getElementById("sumaho_menu_close").style.display="none";
  setTimeout('win_reload()',2000);
}
  • 行番
  • 説 明
  • 1
  • 関数・display_yes()のスタート
  • 2
  • 旅行プランのメニュー部分を表示
  • 3
  • Menu Closeボタンを表示
  • 4
  • Menu Openボタンを非表示
  • 5
  • 関数・display_yes()の終了
  • 6
  • 関数・display_close()のスタート
  • 7
  • 旅行プランのメニュー部分を非表示
  • 8
  • Menu Openボタンを表示
  • 9
  • Menu Closeボタンを非表示
  • 10
  • ページをリロードして、機器サイズに合わせメディアクエリーのCSSの指定に合わせる
  • 11
  • 関数・display_closeの終了

記述したファイルを拡張jsとして、アップロードします。当サイトでは、window_width.jsとしています。

(3)メディアクエリーによるメニューのCSS制御

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* ----- メディアクエリー以外の部分 ----- */
#sumaho_menu_open, #sumaho_menu_close{
          font-weight:bold; font-size:1.3em;
          text-align:center;
          border:solid 1px #000;
          width:90%;
          margin:0 auto;
          color:#fff;
          margin-bottom:5px;
          height:18px;}
#sumaho_menu_open{background-color:red;}
#sumaho_menu_close{background-color:blue;}

/* --------スマホ向けCSS メディアクエリー ------- */
@media only screen and (max-width: 480px) {
#sumaho_menu_open   {display:block;}
#sumaho_menu_close  {display:none;}
#side_menu_box {display:none;}
}

/* -------タブレット向けCSS メディアクエリー ------- */
@media only screen and (min-width: 481px) and (max-width: 768px) {
#sumaho_menu_open   {display:block;}
#sumaho_menu_close  {display:none;}
#side_menu_box {display:none;}
}

/* -------パソコン向けCSS メディアクエリー ------- */
@media only screen and (min-width: 769px) {
#sumaho_menu   {display:none;}
#side_menu_box {display:block;}
}

スマホとタブレット向けは、同じ表示形式にしています。

(4)JavaScriptyファイルの読み込み

index.phpとheader.phpの2つのファイルに記述。<?php wp_head(); ?>の後に

1
<script type="text/javascript" src="http://k-nagai.com/wp-fixed/wp-content/themes/wp-fixed/window_width.js"></script>