>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

Cocoonのグローバルナビのアニメーション効果カスタマイズ

Cocoon・カスタマイズ
この記事は約3分で読めます。

Cocoonのグローバルメニューの動きをカスタマイズしてみるサンプルです。

その他のカスタマイズは以下にもまとめています。

コピペで!Cocoonのグローバルナビをカスタマイズ
Cocoonのグローバルナビバーをカスタマイズしてみます。 コピペで実装できます。お好きなカラーに色変更してご自由にご利用下さい。 アイコンフォント設定方法や、その他のカスタマイズは以下も参考にして下さい。 アニメーション効果のカスタマイズ...

 

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ追加CSS

外観→テーマエディターstyle.css

 

カスタマイズサンプル

左側から移動してくるアンダーライン

動きは以下の動画で確認して下さい。

 

#navi li a:after {
content: '';
width: 0;
transition: all 0.3s ease;
border-bottom: 3px solid #292d48; /*下線の太さ・色*/
display: block;
}
#navi .navi-in a:hover:after {
width: 100%;
border-bottom: 3px solid #292d48; /*下線の太さ・色*/
}

 

 

影を出す

動きは以下の動画で確認して下さい。

 

#navi .navi-in a:hover{
box-shadow: 5px 10px 5px #8D9EB8; /*影*/
}

 

拡大する

動きは以下の動画で確認して下さい。

 

#navi .navi-in a:hover{
transform: scale(1.1, 1.5);
}

 

回転させる

動きは以下の動画で確認して下さい。

 

#navi .navi-in a:hover{
transform: rotate(360deg);
}

 

 

コメント

タイトルとURLをコピーしました