- 文字サイズ変更
- 小
- 中
- 大
解決済
PC用メニューにドロップダウンを追加したい
- 相談者：非公開
- 2020/12/08 10:27
いつもお世話になっております。
PC用表示のヘッダーメニューの『商品の一覧』をマウスオーバーで
ドロップダウンさせて一覧を表示させたいのですが、
スマホ用メニューで記載しているl-gnav_childを使ってできないかと
思ったのですが、うまくできませんでした。
こちらのページを参考にしつつ
https://theorthodoxworks.com/web-design/drop-down-menu-multi-css/
PC表示用のCSSをいじってみたのですが、うまくl-gnav_childが
反映されません。
l-gnav_childを併用するよりか、新しくドロップダウン用の
子メニューを作成したほうが良いのでしょうか。
ご教示の程よろしくお願いします。
PC用表示のヘッダーメニューの『商品の一覧』をマウスオーバーで
ドロップダウンさせて一覧を表示させたいのですが、
スマホ用メニューで記載しているl-gnav_childを使ってできないかと
思ったのですが、うまくできませんでした。
こちらのページを参考にしつつ
https://theorthodoxworks.com/web-design/drop-down-menu-multi-css/
PC表示用のCSSをいじってみたのですが、うまくl-gnav_childが
反映されません。
l-gnav_childを併用するよりか、新しくドロップダウン用の
子メニューを作成したほうが良いのでしょうか。
ご教示の程よろしくお願いします。
このフォーラムへの質問は終了しました
今気になってる疑問、
セミナーに参加すれば解決するかも！？
セミナーに参加すれば解決するかも！？
日本全国のネットショップ12,000社が参加！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
広告０円で楽天の売上アップ続出！
ECマスターズチャンネルをチェック！
ECマスターズチャンネルをチェック！
総視聴回数15万回突破！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
- 返信者：非公開
- 2020/12/08 17:28
ECマスターズの田中です。
PC用表示にて
.l-gnav_child に display: none; が設定されているため、
visibiltyや………（省略）………
PC用表示にて
.l-gnav_child に display: none; が設定されているため、
visibiltyや………（省略）………
- 返信者：非公開（質問者）
- 2020/12/09 10:55
ご回答ありがとうございます。
PC用に.l-gnav_childを作成してdisplayプロパティから
visibilityプロパティに変更しました。
レ………（省略）………
PC用に.l-gnav_childを作成してdisplayプロパティから
visibilityプロパティに変更しました。
レ………（省略）………
- 返信者：非公開
- 2020/12/09 11:17
ECマスターズの田中です。
ページで読み込んでいるstyle.cssの417行目、
.l-gnav_child に対する「display: none;」………（省略）………
ページで読み込んでいるstyle.cssの417行目、
.l-gnav_child に対する「display: none;」………（省略）………
- 返信者：非公開（質問者）
- 2020/12/09 14:36
ご回答ありがとうございます。
display: none;をvisibilityに変更しましたら、
ドロップダウンが正常に動きました！
ただ、その時にスマ………（省略）………
display: none;をvisibilityに変更しましたら、
ドロップダウンが正常に動きました！
ただ、その時にスマ………（省略）………
- 返信者：非公開
- 2020/12/09 15:55
ECマスターズの田中です。
visibilityによる非表示処理は、
ご覧いただいたとおり、非表示にした箇所が
空白として空いてしまいます。
下………（省略）………
visibilityによる非表示処理は、
ご覧いただいたとおり、非表示にした箇所が
空白として空いてしまいます。
下………（省略）………
このフォーラムへの質問は終了しました
質問を検索する