[mtmekj]

【お使いの Snow Monkey のバージョン】
バージョン: 25.2.6
【お使いの Snow Monkey Blocks のバージョン】
【お使いの Snow Monkey Editor のバージョン】
【お使いのブラウザ】
iphone safari
【当該サイトのURL】

### 実現したいこと
スマホハンバーガーメニューのサブメニューを常に開いている状態に
かつ
スマホサイトコンテンツ上にサブメニューのリンクが被らないようにしたい

### 発生している問題
スマホサイトコンテンツ上にサブメニューのリンクが被ってしまいスマホサイトの何もない空白にもリンクが付いてしまう問題

### 試したこと
ChatGPT4Vとの対話でもダメ

@media screen and (max-width: 768px) {
  .c-drawer__submenu {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    width: 100%;
    z-index: 1000;
  }
  .c-drawer:not(.is-active) .c-    drawer__submenu {
    display: block !important;
  }
  .c-drawer.is-active .c-    drawer__submenu {
    display: block !important;
  }
}

これだとサブメニューは常に開いている状態にはなるが
スマホにリンクが被ってしまう

６時間格闘していますがどうにもお手上げです。
誰か助けてください。
よろしくお願いいたします。

♥ 0

Who liked: No user

[キタジマ タカシ]

これだとサブメニューは常に開いている状態にはなるがスマホにリンクが被ってしまう

とのことですが、常に開いた状態にしないで、普通にクリックで開いた場合、背後のリンクをクリックしてしまう現象はどうなるのでしょうか？

♥ 0

Who liked: No user

[mtmekj]

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

常に閉じている状態ですと背後のリンクはなくなりクリックできないようになります。
常に開いている状態ですと背後のリンクが出現しクリックできるようになってしまいます。

今回は納期まで急ぎだったので、無理やりCSSで開いている状態っぽくしたデザインで納品できました。

しかし、今後同じことが起きると困るので、解決策があるようでしたらぜひお聞きしたく思います。
よろしくお願いいたします。

♥ 0

Who liked: No user

[mtmekj]

追記
プラグインもCSSも無効にしてみましたが、この２つは影響していませんでした。
つまり、関係ないということです。
サポートよろしくお願いいたします。

♥ 0

Who liked: No user

[キタジマ タカシ]

このサイトに提示いただいた CSS を追加してみました。そのままだとドロワーが開いていないときでもドロワーのリンクがクリックできる状態になってしまっていたので、セレクタを調整してみました。

@media screen and (max-width: 768px) {
  .c-drawer[aria-hidden="false"] .c-drawer__submenu {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    width: 100%;
    z-index: 1000;
  }
  .c-drawer[aria-hidden="false"] .c-drawer:not(.is-active) .c-drawer__submenu {
    display: block !important;
  }
  .c-drawer[aria-hidden="false"] .c-drawer.is-active .c-drawer__submenu {
    display: block !important;
  }
}

なお、背後のリンクがクリックできてしまう現象は確認できませんでした。背後の要素の z-index とか position の状態なども関係してくるのかもしれません。実際のページを見せてもらうことはできますか？

♥ 0

Who liked: No user

[mtmekj]

ご対応いただきありがとうございます！

できました！
マジ神！と叫んでしまいましたｗ
本当に助かりました。
ありがとうございます！

僕としてはURLお見せして検証していただきたいのですが
守秘義務あるサイト制作なのでURLを掲載できないのが困ったところです（汗）

メニュー設定　＞　✔ドロワーナビゲーション（モバイル用）
＆
上記のCSSコピペ

これでスマホハンバーガーメニューのサブメニューが最初から常に開いており
かつ
スマホサイト上にも謎のリンクが出現しなくなりました。

本当にありがとうございました！

♥ 0

Who liked: No user

[キタジマ タカシ]

解決できてよかったです！ トピックのクローズをお願いします。

♥ 0

Who liked: No user

[投稿者]

投稿