Snow Monkey Mega Menu の max-width の値について

0
いいねをした人: 居ません
15件の投稿を表示中 - 1 - 15件目 (全16件中)
  • 投稿者
    投稿
  • #118777
    株式会社 蔵守
    参加者
    24

    【お使いの Snow Monkey のバージョン】v19.1.6
    【お使いの Snow Monkey Blocks のバージョン】
    【お使いの Snow Monkey Editor のバージョン】
    【お使いのブラウザ】
    【当該サイトのURL】

    ### 発生している問題
    Snow Monkey Mega Menu 3.0.0 の .snow-monkey-mega-menu>.c-navbar__submenu にあたっている max-width の値で、
    --_container-max-width が定義されていないとなり、アップデート前と違う値になってしまっている。

    ### 試したこと

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

    ご報告ありがとうございます! こちらでも試してみたのですが、--_container-max-width には 1280(デフォルト値)が入っていました。

    もしかしたらページレイアウトやヘッダーのレイアウトによっては値が抜けちゃうのかな?と思ったのですが、その辺のレイアウトや設定ってどんな感じでしょうか?

    0
    いいねをした人: 居ません
    #118784
    株式会社 蔵守
    参加者
    24


    元の設定


    バージョンアップ後の設定

    設定が外れちゃってるみたいですね。再設定したらだいじょうぶでした。

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

    んー外れちゃうというのもちょっと謎なのですが、そこが空の場合のデフォルト値も 1280px なんですよね…。

    .c-container {
      --_container-max-width: var(--_global--container-margin);
    }

    となってて、--_global--container-margin

    :root {
       --_global--container-margin: 1280px;
    }

    という感じで /snow-monkey/assets/css/app/app.css で定義されています。なのでやっぱりページレイアウトやヘッダーのレイアウトの関係なのかなーと思うのですがなんでしょう…。

    0
    いいねをした人: 居ません
    #118791
    GONSY
    参加者
    803

    横からすみません。
    ローカルで検証していましたが、該当箇所をデベロッパーツールで見ると、 --_container-max-width がグレーアウトしており、定義されていません。と表示されます(下図黄枠参照)。
     

     
    これを --_global--container-max-width に差し替えると最大幅に合致するので、このあたりが怪しいかなーと思いますが、どうでしょうか。

    この対策として、自身の追加したCSSに定義しています。

    :root {
    	--_container-max-width: var(--_global--container-max-width);
    }
    1
    いいねをした人:
    #118795
    キタジマ タカシ
    参加者
    2233

    あ!ヘッダーが横に広がる設定だと空になっちゃうのかもです!

    1
    いいねをした人:
    #118797
    株式会社 蔵守
    参加者
    24
    .c-container {
        --_container-max-width: var(--_global--container-max-width);
    }

    この部分が Mega Menu のほうのCSSに継承されてないみたいですね。

    .snow-monkey-mega-menu>.c-navbar__submenu {
        --_container-max-width: var(--_global--container-max-width);
        background-color: var(--wp--preset--color--sm-accent);
        left: 0;
        max-width: calc(var(--_container-max-width) + var(--_container-margin-right) + var(--_container-margin-left));
        transform: none;
        width: 100vw
    }

    こんな感じにすると反映されます。

    1
    いいねをした人:
    #118803
    キタジマ タカシ
    参加者
    2233

    --_container-max-width.c-container で定義される変数なのですが、カスタマイザー → デザイン → ヘッダー → ヘッダーを全幅にする」が有効になっていると .c-container ではなく .c-fluid-container が使われるようになるため、--_container-max-width が未定義となりメガメニューも横に広がってしまうみたいでした。

    ここ、改めて考えると、ヘッダーが全幅になったときは親メニューも横に広がるからメガメニューもそれにあわせて全幅になるほうが素直なのでは?と思ったりしたのですがどうでしょうね?

    1
    いいねをした人:
    #118817
    es:エス
    参加者
    134

    横から失礼します。

    主に画像のメガメニュー1や4を使用するためか、個人的にはヘッダーを全幅にした際にはMega Menuも全幅に広がってくれる今の仕様も、素直なふるまいな気がしていて好印象です。

    と同時に、特に画像のメガメニュー1や4などの場合はヘッダーは全幅にせずにいても、Mega Menuの画像は全幅に広がるようにできれば嬉しいですし、反対にこれまでのふるまいのような見せ方が必要な時もあるだろうなと思っています。

    そんなこんなでMega Menuにも幅設定が設けられると便利でよさそうですね。今のところは状況に応じてGONSYさんの示してくださったCSS等での調整をしていこうという感じです。

    1
    いいねをした人:
    #118818
    株式会社 蔵守
    参加者
    24

    デザインにもよるんだろうなと思うんですが、メガメニューとはいえ全幅に広がってしまうと広すぎるんじゃないかなと思います。
    ヘッダーを固定ナビゲーションにしている場合もコンテンツ幅にサブメニューが収まってくれたほうが見やすい気もします。

    2
    いいねをした人:
    #118825
    GONSY
    参加者
    803

    ここ、改めて考えると、ヘッダーが全幅になったときは親メニューも横に広がるからメガメニューもそれにあわせて全幅になるほうが素直なのでは?と思ったりしたのですがどうでしょうね?

    そうですねぇー。ヘッダーが全幅の場合はメガメニュー内も全幅が自然かも。と思いました。
    ちょっといろんなメガメニューを見てみましたが、結論が出ない感じになるので、CSSで調整するのが柔軟かな、とも思います。
    ただ、有料のアドオンということで、カスタマイザーで【ヘッダーを全幅にする】下あたりに【メガメニューも全幅にする】みたいなチェックボックスが追加されるといいかもしれません。

    参考:コンテンツ幅のメガメニュー

    参考:全幅/ヘッダーの幅にあわせたメガメニュー

    参考:コンテンツより狭いメガメニュー風ドロップダウン(一部のぺージを除く)

    2
    いいねをした人:
    #118831
    キタジマ タカシ
    参加者
    2233

    みなさんありがとうございます! 確かに、GONSY さんが挙げてくれた参考サイトをみると、サイトによってどちらもアリって感じですねー。

    – ヘッダー通常幅 / メガメニュー通常幅
    – ヘッダー通常幅 / メガメニュー全幅
    – ヘッダー全幅 / メガメニュー通常幅
    – ヘッダー全幅 / メガメニュー全幅

    の全ての組合わせを実現するためには、

    – ヘッダーは基本通常幅
    – 設定により全幅になる
    – メガメニューは基本通常幅
    – 設定により全幅になる(ヘッダーの幅設定の影響は受けない)

    が良さそうですね。ちょっとその方向で機能を追加しようと思います!

    1
    いいねをした人:
    #118847
    キタジマ タカシ
    参加者
    2233

    あ、もしかしたら全部のメガメニューが共通で同じ幅になるよりも個別に設定できたほうが良いかもしれないのと、設定がちらばるとわかりにくくなるかもなので、「メニュー」管理画面でメガメニューのどれにするか選ぶところの下に、「メガメニューを全幅で表示」みたいなチェックボックスをつくって、それが有効なら全幅になるようにしようと思います。

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

    Mega Menu v3.1.0 で機能追加しました!

    2
    いいねをした人:
    #118859
    GONSY
    参加者
    803

    キタジマさん

    アップデートして追加された機能を確認しました。
    メニューで個別に設定できるのはとても良いですね!
    素早い対応に感謝します。ありがとうございます。
    今後はメガメニューを積極的に活用したいと思います。

    2
    いいねをした人:
15件の投稿を表示中 - 1 - 15件目 (全16件中)
  • トピック「Snow Monkey Mega Menu の max-width の値について」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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