メガメニューの画像を独自に設定&ホバーを別のメニューに移動したら戻る

0
いいねをした人: 居ません
  • このトピックには5件の返信、3人の参加者があり、最後にkojiにより2週、 1日前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #116587
    koji
    参加者
    2

    【お使いの Snow Monkey のバージョン】18.2.0
    【お使いの Snow Monkey Blocks のバージョン】17.2.0
    【お使いの Snow Monkey Editor のバージョン】9.1.0
    【お使いのブラウザ】chrome
    【当該サイトのURL】https://v2.crescent-moon.website/

    ### 実現したいこと

    1.メガメニューで独自の画像を設定したい。
    2.メニューにホバーすると、メガメニューが表示されます。
    そのまま、他のメニューに移動してもメガメニューが表示されたままです。
    (下の方にポインターを移動すると消えますが。)
    他のメニューに移動すると、メガメニューが消えて、他のメニューがクリックできるようにしたい。

    ### 発生している問題

    当該サイトの
    第一階層「プラン」の第二階層「カスタムリンク」は画像なしになり、
    第一階層「制作物」の第二階層「制作物tag」は、全て同じ画像です。
    (アイキャッチの設定から、そうなると言えばそうなのですが。)

    ### 試したこと
    ネットで検索しましたが、見つかったのはこちら↓のフォーラムだけでした。

    度々お世話になっております。
    この度、メガメニューに魅力を感じ、アドオンを購入しました。

    1.
    添付した画像に書いてある「任意の画像urlの返し方」の中身の部分を具体的に教えていただけないでしょうか。

    2.
    メガメニューから他のメニューにポインタを移動させると、メガメニューが残ったままです。
    上述したように、下の方にポインタを移せば消えるのですが、
    そのまま他のメニューに移動しても、
    メガメニューが消えて他のメニューをクリックする方法がありましたら、教えてください。

    お手数をお掛けしますが、よろしくお願いいたします。

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

    Snow Monkey フォーラムは、1トピックにつき1つの質問や話題というルールになっていますので、トピックは分けてください。

    1.メガメニューで独自の画像を設定したい。

    こちらのご質問ですが、メガメニューの画像はもともとアイキャッチ画像を表示させるようになっていると思いますので、アイキャッチのないアンカーリンクの場合は表示されません。
    私がもし独自の画像を表示させるなら、通常のメガメニューに実装されている擬似要素に画像のURLなどを指定して表示させます。
    ※メニューのセレクタには、固有の番号が振られていますので、検証ツールでご確認ください。
     

    li#menu-item-番号 .snow-monkey-mega-menu__figure::before {
        background: url(画像のURL) no-repeat 50% 50% / cover;
    }
    1
    いいねをした人:
    #116638
    キタジマ タカシ
    参加者
    1802

    @koji さん
    GONSY さんが書かれているように、他の方が参照しやすいように1トピック1課題でお願いしているのでトピックはわけるようにお願いします。

    メガメニューから他のメニューにポインタを移動させると、メガメニューが残ったままです。

    検証したのですが、忘れそうなのでここに書いちゃいます><
    下記の CSS を独自に追加されていると思います。

    .p-global-nav .c-navbar__item>a {
        padding: 2px 4px;
        min-width: 80px;
    }

    メニュー項目の padding が上書きされることで、メガメニューの位置がメニュー項目に重なるようになってしまっており、見た目上はマウスがメニュー項目にホバーしているように見えていても、実際は透過されたメガメニューの上にマウスがあり、メニュー項目にはホバーできていないのでメガメニューが開かない、という状態になっているようです。

    ということで、padding を見直してみてください。

    1
    いいねをした人:
    #116669
    koji
    参加者
    2

    GONSY様 キタジマ様
    返信ありがとうございます。

    まず、トピックを分けていなくて申し訳ありませんでした。

    GONSYさんが教えてくださった
    li#menu-item-番号 .snow-monkey-mega-menu__figure::before {
    background: url(画像のURL) no-repeat 50% 50% / cover;
    }
    これで、メガメニューの画像は選べました。

    ただ、「制作物」のメニューだけは、画像が変わりませんでした。

    下記のように無理やり詳細度は上げてみましたが、
    これでは無理なようです。

    /* 制作物 */
    li#menu-item-1339.menu-item.menu-item-type-taxonomy.menu-item-object-products_tag.menu-item-1339.c-navbar__subitem .snow-monkey-mega-menu__figure::before {
    background: url(https://v2.crescent-moon.website/wp-content/uploads/2023/01/family-1.jpg) no-repeat 50% 50% / cover !important;
    }

    tagをメニューに加えると、
    メガメニューでは画像では難しいのでしょうか?

    キタジマさん

    教えてくだっさった

    上記は、削除して他のメニューに移動しても大丈夫になりました。
    paddingで、アクセントカラーに余白をもたせたかったのですが・・。

    いつもありがとうございます。
    tagをメニューに加えても、画像が任意に選べる方法があれば
    ぜひ教えていただきたいです。

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

    任意のタグアーカイブページを開いた状態で、管理バーの「カスタマイズ」をクリック → デザイン → [ タグ名 ] タグページ設定 → アイキャッチ画像で画像を設定すると、そのタグアーカイブページのページヘッダー画像&メガメニューの画像が設定できます。どっちも設定されちゃうのがあれですが、それだと NG ですかね?

    1
    いいねをした人:
    #116676
    koji
    参加者
    2

    キタジマ様

    初歩的なことに気づいておりませんでした。
    ありがとうございました。
    2つとも解決いたしました。

    トピックを閉じます。

    2
    いいねをした人:
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • トピック「メガメニューの画像を独自に設定&ホバーを別のメニューに移動したら戻る」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ