メインメニューを開くとサブメニューも開いてしまう

Question

いつもお世話になっております。

スマホ画面でハンバーガーメニューを開くと中のサブメニューも一緒に開いてしまいます。
サブメニューは『商品一覧』の横にある十字ボタンで開くようにしたいのですが、
たぶんjsでheader全体のis-activeが開くようになっているのが原因なような気がするのですが、
現在使用しているやり方以外で方法が浮かびません。
なにか他に参考になるような方法がございましたら、ご教示していただきたいです。

Accepted Answer

ECマスターズの田中です。

テストページを確認したところ、
PC表示の .header_nav に
opacity: 0; が適用されていることが原因で消えておりました。

PC表示用の
@media screen and (min-width: 1220px) {
に含まれる .header_nav にて、
opacity: 1; をご指定いただきますようお願いします。

Answer

ECマスターズの田中です。

サブメニューを開くためのスタイルシートが

.is-opened .l-gnav_child { display: block; }

のように記載されておりますが、
これでは #header に is-opened クラスが付加された時点で
条件を満たし、開いてしまいます。

それを避けるために、たとえば
「is-openedがついたheaderの中にある、is-openedがついた.l-gnav_parent--productsの次にある.l-gnav_child」
のように、厳密な条件をご指定いただきますようお願いします。

header.is-opened .is-opened.l-gnav_parent--products + .l-gnav_child { display: initial; }

なお、現在は、
.header に対して開閉の動作が紐付けられているため、
「商品の一覧」や空白を含め、開いたメニュー内のどこをクリックしても
メニュー全体が閉じてしまいます。

×ボタンを押した時だけ全体が閉じるよう、
「#toggleをクリックしたら、.headerの.is-openedを切り替える」
というように、JavaScriptを書き換えていただきますようお願いします。

$('.header').on('click', function() {
  $(this).toggleClass('is-opened')
})
  
↓

$('#toggle').on('click', function() {
  $('.header').toggleClass('is-opened');
});

Answer

ご回答ありがとうございます。
ご教示いただいた設定どおり、コードの方を組みなおしましたら
別々に開閉されるようになりました！

重ねてのご質問で大変恐縮なのですが、
この開閉の動作をなめらかにしたいのですが、
transitionや@keyframesで指定してやってみたのですがうまく
反映ができませんでした。
CSSのみだけでなくJSを使用して入れたほうがスムーズでしょうか。
参考にできそうな方法がありましたらご教示いただけましたら幸いです。

Answer

ECマスターズの田中です。

transitionを利用する際、
displayプロパティの切り替え（noneとそれ以外）を行っていると
アニメーションが無効化されてしまいます。

そのため、いただいたテストページにて、切り替え前後における
displayの指定は双方削除した上で、たとえば
.header_nav に対して opacity:0;
.is-opened .header_nav に対して opacity:1;
など、変化前後の値をそれぞれ指定することで、
上記の場合はフェードイン・アウトのようななめらかな動作を
実現することができます。

Answer

ご回答ありがとうございます。
.header_navのdisplayプロパティを削除して、実装しましたら
アニメーションは実現できたのですが、パソコン表示に切り替えた際、
パソコン用のヘッダーメニューが消えてしまいます。

.header_navの@media screenのほうでPC表示を直せないか
いじってみましたが特に改善されず…。
やはりdisplayプロパティを削除したことが原因で表示されていないのでしょうか？

Answer

ECマスターズの海老塚です。

ご返信誠にありがとうございます。

休み明けに確認し、担当よりご回答させていただきます。
今しばらくお待ちいただきますよう、
よろしくお願いいたします。