[ 解決済 ] サブメニューを連動表示させるには

[HANA]

■ 利用テーマとバージョン : Pro 8.5.5

■ 質問内容：

表題の件、
ヘッダーのメインメニューに「abc」があり、その下に「001」というサブメニューがある場合、
「abc」にマウスオンでサブメニュー「001」がメインメニュー下に表示されますが、
例えばトップページに画像を貼って、その画像にマウスオンしたら
前記と同じ様にヘッダーにあるメインメニュー「abc」の下に
サブメニュー「001」が表示されるように連動させることは可能でしょうか？

JSの設定などで可能なのでしょうが、知識が乏しいもので
ご指導いただければ幸いです。

[ls-t]

こんばんは。
HANAさんがご希望の表示・動作について確認させていただきたいのですが、メインメニュー「abc」「def」などを画像化して（あるいはメニューテキストの上や横などに画像を挿入して）、その画像に対してもサブメニューが表示されるようにしたい、ということでしょうか？（添付画像をご参照ください）
それともメニュー部分とは全く関係ないところに配置した画像とメニューの動作を連動させたい、ということでしょうか？

前者はCSSでなんとかなりそうな感じがしますが、後者の場合仕様の意図が私では掴みきれなくて……お手数ですが簡単にでも図説いただけると助かります。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

横からすみません。

JavaScript を使えばできますが、CSS だけでもできそうです。

このページを参考にやってみてください。

参考ページ：https://techacademy.jp/magazine/19418

[HANA]

ls-t様

ご回答有難うございます。
添付の画像をご参照ください。

ページ内の「設定ガイド」の画像にマウスオンした際にヘッダーの「設定ガイド」のサブメニューが開くようにしたいという事です。
ヘッダーに固定されたメニューから任意のページに移動できるんだから不要では？と私も思うのですが、デザイン上でこのような要望が出たもので、、、。

Attachments:

You must be logged in to view attached files.

[ls-t]

添付ありがとうございます。
HANAさんはそんなこと百も承知だと思うのですが、この仕様だと画像とサブメニューが離れてしまう場合に『サブメニューが表示されるけどクリックしようとするとメニューが消えちゃう』ことになってユーザビリティ的にあんまり宜しくない気がします……。

JavaScriptで実装できるとのことですが、私ではスマートな処理が思いつきませんでした。
対馬さんが貼って下さったURLを参考にCSSで実装するか、他の方の回答を待つか、根本的な解決策ではありませんがデメリットをご説明してご要望の方にご納得いただくか、でしょうか。
色々口だけ出す形になってしまって申し訳ないです_(._.)_

[対馬 俊彦]

HANAさん、

ひとつ気になったので、コメントさせていただきます。

スマホでの閲覧は想定しなくてよいのでしょうか？

スマホではマウスオンの検出はできませんし、
タップを検出してもサブメニューを開くことには無理があります。

パソコン限定のサイトであればアリかもしれませんが・・・。

デザインを要望した方にこのことを伝えれば、理解を得られるかもしれません。

[対馬 俊彦]

サブメニューが表示されるけどクリックしようとするとメニューが消えちゃう

けっこう大きい問題ですね。
これは私が最初にコメントした CSS を使うやり方ではクリアできません。

[対馬 俊彦]

すみません、昨日 11:05 AM のコメントを訂正(撤回)します。

参考ページ：https://techacademy.jp/magazine/19418

このやり方は2つの要素が隣接する場合しか役に立たないので、
今回のHANAさんの質問の回答としては不適切でした。

[対馬 俊彦]

JavaScript でやってみました。以下のようにすると実現できます。

※バナー画像にクラス menu-btn を割り当てる。

※WordPress によりグローバルメニューの [設定ガイド] に割り当てられた ID が menu-item-*** になっている。

*** は実際のサイトで確認してください。

【JavaScript】

$(".menu-btn").hover(function(){
  $("li#menu-item-***").addClass("sub-menu-open");
}, function(){
  $("li#menu-item-***").removeClass("sub-menu-open");
});

【CSS】

.device-pc .gMenu>li.sub-menu-open>ul.sub-menu {
opacity: 1;
max-height: 1000px;
}

.device-pc .gMenu>li.sub-menu-open::after {
opacity: 1;
bottom: 0;
}

.device-pc .gMenu>li.sub-menu-open>ul.sub-menu {
transition: all 1.0s;
}

バナー画像にマウスを合わせた後、サブメニューの項目をクリックしやすいように、transition の数値を 1.0s に増やしてあります。

【このやり方で作ったページ】

本文のバナーをクリックしたらサブメニューを開く

実用になるかどうか微妙なところです。

[HANA]

対馬俊彦 様

様々なご忠告およびご提案をいただき感謝いたします。
諸々をふまえて要望者と再度、相談したいと思います。

ありがとうございました。

ls-t 様も有難うございました。

[投稿者]

投稿