メニュー
MENU
こんにちは、
ゲスト
さん
トップ
会員サイト
新着質問
新着回答
人気の質問
解決済
受付中
未回答
質問・返信の一覧
お気に入り
ニックネーム変更
E-mailアドレス変更
パスワード変更
ECマスターズ ツール
ログイン
TOP
PC用メニューにドロップダウンを追加したい
文字サイズ
変更
小
中
大
解決済
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を併用するよりか、新しくドロップダウン用の
子メニューを作成したほうが良いのでしょうか。
ご教示の程よろしくお願いします。
キーワード:
CSS
、
WEBデザイン
、
マウスオーバー
、
エフェクト
投稿内容について報告する
今気になってる疑問、
セミナーに参加すれば解決するかも!?
日本全国のネットショップ12,000社が参加!
ネットショップでお悩みがある方はまずはオンラインセミナーへGO!
セミナー詳細はこちら
返信者:非公開
2020/12/08 17:28
ECマスターズの田中です。
PC用表示にて
.l-gnav_child に display: none; が設定されているため、
visibiltyや………(省略)………
続きを読む
返信者:非公開
(質問者)
2020/12/09 10:55
ご回答ありがとうございます。
PC用に.l-gnav_childを作成してdisplayプロパティから
visibilityプロパティに変更しました。
レ………(省略)………
続きを読む
返信者:非公開
2020/12/09 11:17
ECマスターズの田中です。
ページで読み込んでいるstyle.cssの417行目、
.l-gnav_child に対する「display: none;」………(省略)………
続きを読む
返信者:非公開
(質問者)
2020/12/09 14:36
ご回答ありがとうございます。
display: none;をvisibilityに変更しましたら、
ドロップダウンが正常に動きました!
ただ、その時にスマ………(省略)………
続きを読む
返信者:非公開
2020/12/09 15:55
ECマスターズの田中です。
visibilityによる非表示処理は、
ご覧いただいたとおり、非表示にした箇所が
空白として空いてしまいます。
下………(省略)………
続きを読む
質問を検索する
すべて
初心者・はじめて
共通の送料込みライン
Amazon.co.jp
Yahoo!ショッピング
楽天市場
au PAY マーケット
ポンパレモール
Qoo10
本店サイト
会員専用ツール
ツール設置・利用
ECステーション
海外進出
マッチング・コラボレーション
楽天ペイ
RPP攻略ツール情報交換
商品画像登録ガイドライン
LINE活用
ツール改善コミュニティ
業者営業情報・相談
システム導入支援
会計・経理相談
作業効率化
EC MASTERS LABS
パソコントラブル
その他
返信も検索対象にする
カテゴリーから探す
初心者・はじめて
共通の送料込みライン
Amazon.co.jp
Yahoo!ショッピング
楽天市場
au PAY マーケット
ポンパレモール
Qoo10
本店サイト
会員専用ツール
ツール設置・利用
ECステーション
海外進出
マッチング・コラボレーション
楽天ペイ
RPP攻略ツール情報交換
商品画像登録ガイドライン
LINE活用
ツール改善コミュニティ
業者営業情報・相談
システム導入支援
会計・経理相談
作業効率化
EC MASTERS LABS
パソコントラブル
その他