[koji]

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

### 実現したいこと

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

### 発生している問題

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

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

Snow Monkey Mega Menuのメニュー画像サイズについて

このトピックには2件の返信、2人の参加者があり、最後に光下 太郎により1年、 6ヶ月前に更新されました。 3件…

snow-monkey.2inc.org

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

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

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

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

♥ 0

いいねをした人: 居ません

[GONSY]

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

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

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

li#menu-item-番号 .snow-monkey-mega-menu__figure::before {
    background: url(画像のURL) no-repeat 50% 50% / cover;
}

♥ 1

いいねをした人:

[キタジマ タカシ]

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

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

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

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

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

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

♥ 1

いいねをした人:

[koji]

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

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

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

クレセントムーン

格安・迅速・確かなホームページ制作

v2.crescent-moon.website

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

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

/* 制作物 */
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

いいねをした人: 居ません

[キタジマ タカシ]

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

♥ 1

いいねをした人:

[koji]

キタジマ様

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

トピックを閉じます。

♥ 2

いいねをした人:

[投稿者]

投稿