12.メニューの表示制御
768px以下の画面が小さい機器で表示したとき、出来るだけ画面を有効に使えるようサイドメニューを非表示にし、必要時に再表示する仕組みです。JavaScriptとCSSを利用して、制御しています。
1)ボタンの設置
以下のボタンは、6.主たるテンプレートの3)(2)サイドメニューで表記済みです。
旅行プランメニューの上部に設置しています。
- 行番
- 説 明
- 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;} } |
スマホとタブレット向けは、同じ表示形式にしています。