スマホに切り替えた時のヘッダーメニューが開かない

Question

いつもお世話になっております。
ヘッダーメニューで、スマホにしたときメニューを
ハンバーガーメニューで開くようにしていたのですが、
動作確認をした際、ボタンを押しても開きません…。
header_gnavの何かが悪い気がするのですが、displayなどを
いじってみても、メニューがずっと閉じたままか開かれたままです。

解決策ありましたらご教示の程よろしくお願いします。

Accepted Answer

ECマスターズの田中です。

失礼いたしました、私よりご案内差し上げたCSSに誤りがございました。

class="header_gnav" ではなく、class="header_nav" に対して
表示する設定をご記載いただく必要がございますので、
私よりご案内差し上げたCSSから「g」を一文字削除して

.is-opened .header_nav { display: initial; }

にご修正いただいた上で、表示をご確認いただきますようお願いします。

Answer

ECマスターズの伊藤です。

> header_gnavの何かが悪い気がするのですが、displayなどを
> いじってみても、メニューがずっと閉じたままか開かれたままです。

こちらですが、実際のページを拝見させていただきたいので、
URLをご連絡いただけますでしょうか。

フォーラムへのご投稿が難しい場合は、
一番最初の投稿の右下にございます
「投稿内容について報告する」より
お知らせいただきますようお願いします。

Answer

ECマスターズの伊藤です。

テストページのURLのご連絡ありがとうございました。

こちらのメニューですが、参考にされたサイトをご教示いただけますでしょうか。
度々お手数おかけしますが、よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

参考サイトのご連絡ありがとうございました。

確認したところ、参考サイトでは、
JavaScriptを使用して、id="header"に
Classの付与、消去を行うことで、
ご対応頂いているようです。

https://ec-masters.gyazo.com/15c3d04085ef1963aff0f4bc5749481d

そのため、同様のJavaScriptをご用意いただきたいのですが、
参考に頂いたサイトが、
メニューの仕組みを提供しているサイトではなく、
独自に作成されたJavaScriptを利用している為、
申し訳ありませんが、同様の仕組みをご案内することは
できかねます。

そのため、

【jQuery&CSS】レスポンシブなハンバーガーメニューを作成する
https://www.aiship.jp/knowhow/archives/31639

などのような、仕組みを提供されているサイトをご参考に、
作成をいただくか、

EC WORKS
https://ec-works.co.jp/

にご依頼いただければ、似たような仕組みで
メニューを作成することが可能となっておりますので、
ご検討くださいませ。

Answer

ご回答ありがとうございます。

JavaScriptを追記してみたところ、ボタンの方は動かすことが
できたのですが、メニューの中身が開かれません。
要素ごとの紐づけがちゃんとできていないということでしょうか。

Answer

ECマスターズの伊藤です。

> JavaScriptを追記してみたところ、ボタンの方は動かすことが
> できたのですが、メニューの中身が開かれません。

失礼いたしました。

改めて確認したところ、メニューの展開部分は、
id="gnav"にStyleを追加し、
表示非表示を行っておりましたので、
クリック時にStyleが追加される動作を
追加頂く必要がございます。
https://ec-masters.gyazo.com/f834661e4f83c10ea579e05b25e2f645

Answer

ご回答ありがとうございます。

追加でスタイルを変更するjsを入れてみたのですが、
コードが不適切なのか反映されませんでした。

【追加で入れたコード】
function show_block(){
   if(document.getElementByIb("gnav").style.display == ""){
      document.getElementByIb("gnav").style.display = "none";
   }else{
      document.getElementByIb("gnav").style.display = "";
   }
}


また、id="gnav"にstyleを追加したところ、jsも今く起動していないせいか
PC表示のメニューも消えてしまいました。
PC表示メニューはjsがうまく動けば表示されるようになるのでしょうか？

Answer

ECマスターズの田中です。

> 追加でスタイルを変更するjsを入れてみたのですが、
> コードが不適切なのか反映されませんでした。

こちらのコードは、スタイルを変更する準備を行ったのみとなっており、
実際に切り替えるにはshow_block関数を実行する必要がございます。
なお、getElementByIb ではなく getElementById が正しい関数名となります。

ページ全体ではすでに、親要素に対して
class="is-opened" の有無を切り替える動作が
JavaScriptによって実装されておりますので、

JavaScriptを追記せず、スタイルシートにて、
class="is-opened" の中にある class="header_gnav" に対して
表示する設定を加えていただきますようお願いします。

.is-opened .header_gnav { display: initial; }

> また、id="gnav"にstyleを追加したところ、jsも今く起動していないせいか
> PC表示のメニューも消えてしまいました。

id="gnav" は、PC表示のメニューの内容も担当しておりますので、
直接 style="display:none;" をご記載いただきますと、
PCでも表示が消えてしまいます。
id="gnav" より、 style="display:none;" を削除していただきますようお願いします。

以上２点をご変更いただくことで、
横幅1220px未満でのメニューの開閉が動作するようになります。

Answer

ご回答ありがとうございます。
追記したJSとstyleを削除し、is-openedをheader_gnavに追記してみたのですが、
コードが無効になっているのか中身が出てきません。
Developerからheader_gnavに直接is-active is-openedを入れると中身が出てきたので、
多分CSSかコードの書き方が原因だとは思うのですが、 class="header is-active"のように
 class="header_gnav is-active"とする必要があるのでしょうか。