Cocoonフォーラム

2018.02.102023.01.25

書き込みの前に以下の3点をご確認ください。

1つのトピックにつき1つの質問を書き込んでください
不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください
該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL：

相談内容：

不具合の発生手順：

解決のために試したこと：

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

共有:

通知

すべてクリア

[解決済] グローバルナビメニューのサブメニューにtransitionを適用したい

CSSカスタマイズ相談

最新の投稿 : 匿名 5年前

3 投稿

2 ユーザー

1 Reactions

3,320 表示

未解決

RSS

みるみ

(@みるみ)

Eminent Member

結合: 6年前

投稿: 24

Topic starter 2019年7月13日 23:23

いつもお世話になっております。
今回はシンプルなcss編集を教えていただきたく思います（もしトピックを立てるべき場所はここより「カスタマイズ相談」の方が適切ならばすぐに移動させます）。

https://milmemo.net/

上記サイトで、上部のナビメニューをマウスオーバーするとサブメニューが表示されます。

これは

.navi-in > ul li:hover > ul {
    display: block;
}

によって実現されているのだと思っているのですが、この場合transitionプロパティを付与するcssセレクタはどれになるのでしょうか？

.navi-in > ul li > ul {
}

こうなるのかと思ったのですがうまく行かず、難儀しています。

やりたいことは「ふわっと表示させたい」だけですので、:hover先のプロパティは既にあるdisplay:block;で事足りるのかなと思っております。

ソースの短縮は解除しておきました。
よろしくお願いいたします。

わいひら

(@yhira)

Illustrious Memberサイト Admin

結合: 7年前

投稿: 17133

2019年7月14日 12:24

サブメニューの1階層目だけということであれば、それでも良いのではないかと思います。
ただ、マウスホバーでdisplay: none;からdisplay: block;にしただけでは、アニメーションにはならないので、visibilityのvisibleとhiddenで表示を切り替える必要はあるかもしれません。
http://www.htmq.com/style/visibility.shtml

※カスタマイズの方がよさそうなので、後で返信を確認したら、「カスタマイズ相談」の方に移動させておきます。ただ、基本的には、好きなところに書き込んでいただければと思います（僕が後で移動させるので）。

みるみ

(@みるみ)

Eminent Member

結合: 6年前

投稿: 24

Topic starter 2019年7月14日 14:10

アニメーションにはdisplayプロパティだけではいけないのを失念しておりました。ありがとうございます。

しかしそれだけではうまくいかず、1時間ほどひたすら色々試行錯誤していたらなんとかなりました。

一応ご報告として、最終的にはこうなりました。

.navi-in > ul .sub-menu {
    display: block;
    z-index: -1;
}
.navi-in > ul li > ul {
    opacity: 0.0;
    transition: 0.47s ease-in-out;
}
.navi-in > ul li:hover > ul {
    opacity: 1.0;
    transition: 0.31s ease-in;
    z-index: 999;
}

z-indexを使ったのが解決に繋がりました。

この度もありがとうございました！

わいひら reacted