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);
}