[ゆみし]

【お使いの unitone のバージョン】11.3.0
【お使いのブラウザ】Chrome
【当該サイトのURL】公開前のため非掲載とさせていただきます

### 実現したいこと

メガメニューをクリックで開閉したい

### 発生している問題

環境によって、一度メガメニューを開いたあとメニュー項目を再度クリックしても閉じられなくなる

• 問題なく閉じることができるブラウザ
  • MacのChrome
• クリック（orタップ）しても閉じることができないブラウザ
  • MacのSafari
    • クリック時にマウスを押したままにすると、その間は閉じられる
  • iPhoneのSafari
  • iPhoneのChrome

### 試したこと

• メガメニュー＞ブロック設定＞表示＞クリックして開く のON・OFF
• メニュー項目のクリック以外で閉じることができるか検証
  • メガメニューの範囲外をクリックすると閉じることができる

 

先日追加されたメガメニューの機能を早速利用させていただいております。公開前に各環境で動作確認を行ったところ上記の通りになっており、解決できていない状況です。

いろいろな箇所でCSSの追加・上書きをしているため、こちらでのカスタマイズが原因の可能性もあるのですが、解決策などありましたらお伺いできますと幸いです。よろしくお願いいたします。

♥ 0

いいねをした人： いません

[inc2734]

ご報告ありがとうございます！ たしかに Safari で挙動がおかしいですね…。調査します！

♥ 0

いいねをした人： いません

[inc2734]

v11.4.1 で修正してみましたがどうでしょうか？ アップデートして確認してみてください！

♥ 0

いいねをした人： いません

[ゆみし]

アップデートしたところ、手元のどの環境でも問題なく動作するようになりました！お忙しい中早速のご対応ありがとうございます。

制作時にメガメニューを採用する機会が多いため、今回の機能の追加をとても嬉しく思っております。これからたくさん活用させていただきます！

♥ 0

いいねをした人： いません

[ゆみし]

度々の投稿失礼いたします。先日ご対応いただいたSafariでの挙動について、別の問題が見つかったため再度トピックを開かせていただきました。

MacのSafariで確認した事象なのですが、少しでもページをスクロールした状態でメガメニューを開こうとすると、メニュー部分は開かず（一瞬ちらつきがあります）クリックするたびにスクロール位置が少しずつ上に移動していくという動きだけが起こるようです。

また、本題からは逸れますが、このスクロール位置のわずかな移動についてはハンバーガーメニューの開閉時にも同様に起こっておりました。こちらはMacのSafari・Chrome両方で確認しております。

先日一度で確認しきれず、再度お手数をおかけすることになり申し訳ありません。上記の事象が限られた条件で発生するもののようでしたら、DiscordのDMなどで該当ページのURLをお送りできればと思います。ご確認のほどよろしくお願いいたします。

♥ 0

いいねをした人： いません

[inc2734]

いえいえ、ご報告助かります！

下記ページの「サンプル」のところにメガメニューを設置しているのですが、下記のページでも同様の現象が確認できますでしょうか？

メガメニューブロック – WordPress テーマ unitone

unitone.2inc.org

僕の Mac の Safari と Chrome では正しく開閉するようでした。

また、本題からは逸れますが、このスクロール位置のわずかな移動についてはハンバーガーメニューの開閉時にも同様に起こっておりました。こちらはMacのSafari・Chrome両方で確認しております。

これはページが微妙にスクロールしてしまう、ということですかね？ 僕の環境ではスクロールは再現しなかったのですが、ハンバーガーボタン（三みたいなボタン）と、オーバーレイメニュー（スマホ用のメニュー）の閉じるボタン（×）の表示位置が微妙に違うので、それでスクロールしているように感じるというのはあるのかな？と思ったりしました。

♥ 0

いいねをした人： いません

[ゆみし]

早速のご返信ありがとうございます。

下記ページの「サンプル」のところにメガメニューを設置しているのですが、下記のページでも同様の現象が確認できますでしょうか？

いただいたURLにて確認したところ、Safari・Chromeともに正しく動作しておりました。ということはこちらで上書きしたCSSなどに原因がある可能性が高いですね…！ページを全くスクロールしていない状態であれば正しく動作するため不思議なのですが、もう少し調べてみたいと思います。

これはページが微妙にスクロールしてしまう、ということですかね？

こちらおっしゃる通りです。メニューが閉じられた瞬間にコンテンツ部分が少し上に動くのが見えて、連続で開閉するとどんどん上に戻されていくというような状態です。メガメニューの動きと近しいので、もしかすると原因は共通しているのかもしれません…

♥ 0

いいねをした人： いません

[ゆみし]

重ねての投稿失礼いたします。

ハンバーガーメニューの動きについては、CSS内のscroll-padding-topを削除したところ正しく動作するようになりました！

メガメニューも同時に解決することはできなかったのですが、取り急ぎご報告させていただきます。

♥ 0

いいねをした人： いません

[ゆみし]

（二重で投稿されてしまったため本文を削除いたしました）

♥ 0

いいねをした人： いません

[ゆみし]

先ほど投稿したscroll-padding-topですが、メディアクエリで別途設定していた分の削除が漏れておりました。こちらも削除したところ、メガメニューも正しく動作するようになりました！

クラシックテーマの癖でそのまま設定していましたが、ブロックの組み方次第で不要になるCSSであることと、テーマへ影響が出てしまうことも分かりましたので、今後は使用を控えたいと思います。

お騒がせいたしました。トピックは閉じさせていただきます！

♥ 0

いいねをした人： いません

[投稿者]

投稿