Cocoonのグローバルナビのカスタマイズ（スイスイ動くアニメーション）

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

コピペしたら忘れず「公開」を押します。