スマホサイトコンテンツ上に常に開いたサブメニューのリンクが被らないようにしたい

0
いいねをした人: 居ません
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #133856
    mtmekj
    参加者
    0

    【お使いの 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;
      }
    }

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

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

    0
    いいねをした人: 居ません
    #133870
    キタジマ タカシ
    参加者
    2201

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

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

    0
    いいねをした人: 居ません
    #133933
    mtmekj
    参加者
    0

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

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

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

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

    0
    いいねをした人: 居ません
    #133934
    mtmekj
    参加者
    0

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

    0
    いいねをした人: 居ません
    #133938
    キタジマ タカシ
    参加者
    2201

    このサイトに提示いただいた 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
    いいねをした人: 居ません
    #134010
    mtmekj
    参加者
    0

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

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

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

    メニュー設定 > ✔ドロワーナビゲーション(モバイル用)

    上記のCSSコピペ

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

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

    0
    いいねをした人: 居ません
    #134035
    キタジマ タカシ
    参加者
    2201

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

    0
    いいねをした人: 居ません
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • トピック「スマホサイトコンテンツ上に常に開いたサブメニューのリンクが被らないようにしたい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。