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

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

おまけ：色違いデザイン

下線をレインボーカラーにしてみました。

ダークモードのテーマによく合うと思います。

/* Navibar */
#navi .navi-in a, #navi .navi-in a{
	font-family: 'WebLTGothicFont';
  color: #9b9dad;
}

/* 色と影 */
#header-container .navi, #navi .navi-in>.menu-header .sub-menu {
  background: #2c303a;
    border-top: 5px solid #5a5f73;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
}

/* グローバルナビアニメーション */
.item-label:hover{
	color:#fff;
}
.item-label:after{
	content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;/*初期状態では下線非表示*/
  height: 3px;/*下線の高さ*/
  background: linear-gradient(70deg,#0ebeff,#ffdd40,#ae63e4,#47cf73);/*下線の色*/
  z-index: 999;
  transition: all 0.3s
}
.item-label:hover:after{
	width: 100%;/*hover時に表示*/
}
#navi .navi-in a:hover{
	background: transparent;
}