[GONSY]

いつもお世話になっております。
「Snow Monkey Mega Menu」についての要望です。

人形の島田 | 埼玉県熊谷市の雛人形・五月人形専門店 | けずりひ島田

埼玉県熊谷市の人形専門店。石川潤平作品を中心とした本物志向の雛人形・五月人形・鎧兜など節句商品を各種取り揃えています。夏季には限定でかき氷も楽しめます。

www.shimada-dolls.co.jp

こちらのサイトでSnow Monkey Mega Menu（メガメニュー4）を「商品一覧」に使用しています。
たとえば、グローバルナビゲーションの「ホーム」から横にマウスをスライドさせて「店舗案内」を選択しようとした際、「商品一覧」の上を通りますが、「商品一覧」のメガメニューがチラっと一瞬だけ開きます。

できれば、マウス通過による反応を回避して、確実に「商品一覧」にマウスを当てた場合だけメガメニューを開くようにしたいです。
200ms程度で良いと思いますが、遅延して反応するのがベターかと考えています。
この手のUIは考え方もさまざまあり、意図的に今の表示になっているかと思いますが、ご検討いただけると嬉しいです。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

あーなるほどです。メガメニューに限らず普通のメニューももしかしたらそうしたほうが良いかもですね。ちょっと実際に遅延させてみて操作感を確かめてみたいと思います！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

JavaScript で開くタイミングを調整しようと思っていたのですが、CSS でやったほうがユーザー側でもタイミング調整しやすいかも？と思ってちょっとやってみています。

.p-global-nav .c-navbar__submenu[aria-hidden="false"] {
  transition-delay: 1s;
}

@media (hover: hover) and (pointer: fine) {
  .p-global-nav .c-navbar__item[aria-haspopup=true]:active:before,
  .p-global-nav .c-navbar__item[aria-haspopup=true]:focus:before,
  .p-global-nav .c-navbar__item[aria-haspopup=true]:hover:before {
    transition-delay: 1s;
  }
}

セレクタはちょっと調整が必要かもですが、こんな感じはどうでしょうか？

♥ 2

いいねをした人:

[GONSY]

@キタジマ さん

WordPress 6.1　のリリース間近のタイミングで対応していただきありがとうございます。
CSSでもいけるんですねー。調整しやすいという点で、CSSのほうがメリットがあると思います。
該当のサイトに反映して良い感じにできました！
トピックをCLOSEします！

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

確認ありがとうございます！ 一応まだセレクタをどうするかや CSS 変数を使うかなど考え中ですが、6.1 対応版の Snow Monkey v18.0.0 にこの CSS とほぼ同等なものを取り込もうと考えています。

♥ 1

いいねをした人:

[キタジマ タカシ]

Snow Monkey Blocks v18.0.0 で、下記の CSS で調整できるようにしました！

.p-global-nav {
  --global-nav-submenu-open-delay: 1s;
}

♥ 1

いいねをした人:

[投稿者]

投稿