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

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

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

コピペで！Cocoonのグローバルナビをカスタマイズ

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

ayaito.net

カスタマイズ方法

簡単な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);
}