カーソルを合わせると現れるメニューについて

Question

お世話になります。https://item.rakuten.co.jp/enya1/kome010-5set/のように「もつ鍋」「水炊き」などにカーソルを合わせると現れるメニューを実装するにはどのようにするかわかりますでしょうか？色々、やってみましたがダメでした...。上記のお店は下部にメニューが出るのですが出来れば、カーソルを合わせた際に上側にメニューを出したいのですが...。ヤフーにも同様に実装したいので汎用性があると助かります。よろしくお願い致します。

Answer

ECマスターズの田中です。> 「もつ鍋」「水炊き」などにカーソルを合わせると> 現れるメニューを実装するにはどのようにするかわかりますでしょうか？基本的には、下記ページで紹介されている仕組みを応用して実装することができます。hoverすると表示されるメニューhttps://qiita.com/dokkoisho/items/76875e842c8cf2c4361eCSSのみで作るドロップダウンメニュー(シングル＆多階層＆メガ)https://theorthodoxworks.com/web-design/drop-down-menu-multi-css/なお、いただいた商品ページではiframe内に設置されておりますが、CSSのみで実現できるため、ヘッダーコンテンツに直接ご記載いただくことも可能です。CSSのセレクタに「:hover」が存在することを利用して、マウスカーソルを乗せる要素と表示する要素を含めたセレクタの規則に非表示時の設定を、上記のセレクタにて、マウスカーソルを乗せる要素に「:hover」を追記した規則に表示時の設定をそれぞれ記載することで実装することができます。例）メニュー１個ぶんごとに上記の構造を用意しておき、表示する部分を予め１箇所に重ねておくことで、いただいたページのメニューが実現されております。このような構造になっているため、マウスカーソルを乗せる要素に対して、表示部分が小要素もしくは後の兄弟要素になっている必要があり、上部に表示するためには、position:absolute;をうまく使って配置する必要がございます。まずは一度、ミカン星人さんにて作成をお試しいただき、不明な点がございましたらお知らせいただきますようお願いします。

Answer

ありがとうございます。頂いた情報を元に試行錯誤しているのですがドロップダウンメニュー内部にIframeを置くとカーソルがiframe内に移動するとドロップダウンメニューが消えてしまうという現象が起こっております。何か、対応策はありますでしょうか？

Answer

ECマスターズの田中です。iframe内は別のページとして扱われているため、大本のページからマウスカーソルが外れたとみなして:hover が適用されなくなり、非表示になっている可能性がございます。まずは、iframeを使わずに、たとえば画像１枚を幅いっぱいに広げて表示するなどして、その状況で同じ現象が起こらないかどうがご確認いただき、起こらないようであれば、やはりiframeが原因である可能性が高いので、iframeを使わずに直接HTMLタグを記載していただくことをご検討いただきますようお願いします。

Answer

ありがとうございます。Iframeを使わずになんとかそれっぽい感じのが出来ました！一旦、運用してみてまた疑問点がありましたら質問させて頂きます。

カーソルを合わせると現れるメニューについて

カテゴリーから探す