ホームページテンプレートを無料配布中
商用利用もWEB制作業者様利用も全て無料

テンプレートパーティー

スマホ画面を「縦」から「横」にした場合でもメニューをスムーズに動作させる方法

※注意:「横」から「縦」に回転させた場合は「メニューが表示されたまま」で「3本バー」が出てきます。
ブラウザを再読み込みした段階で開閉プログラム(openclose.js)が動くので、再読み込み時点又はページを移動した時点で本来の動作(メニューが消える)になります。横から縦にした段階でメニュー表示も消す事はできないのでご了承下さい。
今回のカスタマイズはあくまで「メニューが表示されない」という問題点を回避するものです。

現在のレスポンシブ用テンプレートの場合、スマホ環境などで画面を「縦」から「横」にした場合にメニューが一旦消えてしまう現象(※端末のウィンドウサイズにより動作が異なる場合あり)が発生する場合があります。

これは、cssでは「リアルタイム」で動作が反映、openclose.jsは「ブラウザの再読み込み時」に反映される為、そのタイミングの差によって発生する現象で不具合ではありません。ブラウザを再読み込みした段階が正常な動作内容となります。

ただ、これだとやはり不便だという人向けに縦から横にした瞬間でもメニューを表示させるマニュアルを用意しました。

お手元ののopenclose.jsのバージョンを確認

まずはお手元のjsファイルが最新版か確認して下さい。
jsファイル冒頭に

* ブロック開閉処理
* 2015/12/21 ボタン画像の非表示処理を行わない


という説明が入っていれば最新版です。 入っていない人は最新版をダウンロードして下さい。

スマホ用(※480px未満のウィンドウ幅)と、それ以外用のメニューブロックをそれぞれ用意

※全htmlの変更が必要です。

biz33の場合は(index.htmlの場合)、

<nav id="menubar">
<ul>
<li class="current"><a href="index.html">HOME</a></li>
<li><a href="company.html">COMPANY</a></li>
<li><a href="service.html">SERVICE</a></li>
<li><a href="recruit.html">RECRUIT</a></li>
<li><a href="link.html">LINK</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>

とあるのが今までのメニューブロックなので、これを以下に変更。
メニューブロックを2つに分けて、それぞれ異なるid値(「menubar」と「menubar-s」)を付けているだけです。

<!--PC用-->
<nav id="menubar">
<ul>
<li class="current"><a href="index.html">HOME</a></li>
<li><a href="company.html">COMPANY</a></li>
<li><a href="service.html">SERVICE</a></li>
<li><a href="recruit.html">RECRUIT</a></li>
<li><a href="link.html">LINK</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>

<!--スマホ用-->
<nav id="menubar-s">
<ul>
<li class="current"><a href="index.html">HOME</a></li>
<li><a href="company.html">COMPANY</a></li>
<li><a href="service.html">SERVICE</a></li>
<li><a href="recruit.html">RECRUIT</a></li>
<li><a href="link.html">LINK</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>

biz33テンプレートの場合、「class="current"」の位置がhtmlごとに異なっているので注意して下さい。
current指定をするとメニューの色が変わるというスタイル設定がされています。

cssフォルダのstyle.cssのメニューのスタイルを調整していきます

cssファイルの「上の方(共通設定用)」にある、

/*上部のメインメニュー
---------------------------------------------------------------------------*/
・・・

の、
nav#menubar ul {
・・・

や、
nav#menubar ul li {
・・・

や、
nav#menubar ul li a {
・・・

や、
nav#menubar ul li:first-child {
・・・

や、
nav#menubar ul li a:hover,
nav#menubar ul li.current a {
・・・

を、以下に変更。
一旦、PC用のスタイルにスマホ用のスタイルを合わせるだけです。

nav#menubar ul,
nav#menubar-s ul {
・・・

nav#menubar ul li,
nav#menubar-s ul li {
・・・

nav#menubar ul li a,
nav#menubar-s ul li a {
・・・

nav#menubar ul li:first-child,
nav#menubar-s ul li:first-child {
・・・

nav#menubar ul li a:hover,
nav#menubar-s ul li.current a,
nav#menubar ul li a:hover,
nav#menubar-s ul li.current a {
・・・

※テンプレートによってはメニュー設定用のスタイル名が異なる場合がありますが、メインメニュー用で記載されているものに対して同じように行って下さい。

続いてここの設定内に新規で以下を追加。
/*スマホ用メニューを表示させない*/
nav#menubar-s {
display: none;
}

次にcssの「下の方(スマホ用の設定箇所)」にあるメニュー設定の
nav#menubar ul {
・・・

や、
nav#menubar ul li {
・・・

や、
nav#menubar ul li a {
・・・

を以下に変更する。※「-s」という文字列が加わっているだけです。

nav#menubar-s ul {
・・・
nav#menubar-s ul li {
・・・
nav#menubar-s ul li a {
・・・

※こちらもテンプレートによってはメニュー設定用のスタイル名が異なる場合がありますが、メインメニュー用で記載されているものに対して同じように行って下さい。

続いて更に下にある、
/*その他
---------------------------------------------------------------------------*/
・・・

の設定内に以下を新規で追加。

/*PC用メニューを非表示にする*/
nav#menubar {
display: none;
}
/*スマホ用メニューを非表示から表示に切り替える*/
nav#menubar-s {
display: block;
}

トップページ「以外」のhtml下部のスクリプトの設定を変更

トップページでは開閉メニューは使っていないので、それ以外のhtmlの下の方にある、
open_close("menubar_hdr", "menubar");
の行を以下に変更。※「-s」という文字列が加わっているだけです。
open_close("menubar_hdr", "menubar-s");

完成です

こちらにサンプルがあります。

ひとまずPCで確認してみる場合は、ブラウザ幅を「480px以下」の状態にして一旦「再読み込み」をかけます。その後、トップページ「以外」のメニューをクリックし(※この状態だと3本バーが表示され、メニューは消えている)、幅を480px以上にすればスマホを縦から横にした状態と同じ状況(3本バーは消えてメニューが表示)で確認できます。

スマホ用とそれ以外用でちゃんとメニューが切り替えられているか心配な場合
例えばスマホ用のhtmlのメニュー1個を
<li><a href="link.html">LINK※スマホ</a></li>
等にして表示が切り替わるか確認するといいと思います。
スマホ用ウィンドウ幅(480px未満)と判定された場合、「LINK」から「LINK※スマホ」にメニュータイトルが変わります。

↑ PAGE TOP