PC用メニューにドロップダウンを追加したい

Question

いつもお世話になっております。

PC用表示のヘッダーメニューの『商品の一覧』をマウスオーバーで
ドロップダウンさせて一覧を表示させたいのですが、
スマホ用メニューで記載しているl-gnav_childを使ってできないかと
思ったのですが、うまくできませんでした。

こちらのページを参考にしつつ
https://theorthodoxworks.com/web-design/drop-down-menu-multi-css/
PC表示用のCSSをいじってみたのですが、うまくl-gnav_childが
反映されません。
l-gnav_childを併用するよりか、新しくドロップダウン用の
子メニューを作成したほうが良いのでしょうか。
ご教示の程よろしくお願いします。

Accepted Answer

ECマスターズの田中です。

visibilityによる非表示処理は、
ご覧いただいたとおり、非表示にした箇所が
空白として空いてしまいます。

下のメニューを上に移動する、というよりは、
要素の領域の高さを無くすようなイメージが
構造として理解しやすいかと思います。

たとえば、閉じている状態では
overflow: hidden; max-height: 0;
となっているところを、開いた際に
max-height: 217px;
を適用する、というような構造です。
（高さの217pxは、内容に合わせて調整をお願いします）

Answer

ECマスターズの田中です。

PC用表示にて
.l-gnav_child に display: none; が設定されているため、
visibiltyやopacityを変更しても表示されません。

display: none; の代わりに visibility: hidden; を設定する、
などの方法でご対応をお願いいたします。

Answer

ご回答ありがとうございます。
PC用に.l-gnav_childを作成してdisplayプロパティから
visibilityプロパティに変更しました。
レイアウトも崩れていないので、CSSは効いているとは思うのですが、
動作が反応しません。
色々詰め込みすぎて無効化もしくは読み込まれていないのでしょうか。

Answer

ECマスターズの田中です。

ページで読み込んでいるstyle.cssの417行目、
.l-gnav_child に対する「display: none;」の指定が
未だに残っております。
こちらを削除していただきますようお願いします。

Answer

ご回答ありがとうございます。
display: none;をvisibilityに変更しましたら、
ドロップダウンが正常に動きました！
ただ、その時にスマホの表示も調整したのですが、表示にしている
サブメニューの要素分空白が空いてしまいます。
この場合、下のメニューを閉じているときに上にくるようにすれば
よいのでしょうか？