Cocoonのグローバルナビゲーションのカスタマイズ方法を紹介します。
完成イメージ

ナビゲーションをハバーした時に、白い下線がスイスイ動くアニメーション付きです。
ここではパステルカラーにしていますが、サイトの雰囲気に合わせて、色を変えて楽しんでみてください。
カスタマイズ用CSSコード
以下のコードを、カスタマイザーの追加CSSにコピペします。
「追加CSS」の詳しい場所は、以下の記事で解説しておりますので必要な方はご確認ください。
【Cocoon】SNSシェアボタンのカスタマイズ(コピペOK)
/* グローバルナビアニメーション */
.item-label:hover{
color:#fff; /* ハバー時の文字色 */
}
.item-label:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0%; /*初期状態では下線を非表示*/
height: 3px; /*下線の太さ*/
background: #fff; /*下線の色*/
z-index: 999;
transition: all 0.3s
}
.item-label:hover:after{
width: 100%; /*hover時に下線を表示*/
}
#navi .navi-in a:hover{
background: transparent;
}
コピペしたら忘れず「公開」を押します。
コメント
[…] Cocoonのグローバルナビのカスタマイズ(スイスイ動くアニメーション)alic… […]