
ホバーで白い下線が引かれるようにしたい、、、
WordPressテーマ「Arkhe(アルケー)」では、デフォルト設定でヘッダーメニューにホバーするとテーマのメインカラーにフォントカラーが変更されるようになっています。
今回は、ヘッダーメニューにホバーすると白い下線が引かれるCSSカスタマイズ方法をご紹介します!
目次
【Arkhe】ヘッダーメニューカスタマイズCSS
このままコピペOK!
/* ナビゲーションリストアイテムの基本スタイル */
.c-gnav li {
list-style: none; /* リストマーカーを非表示 */
padding: 0.5em 1em; /* 内側の余白 */
}
/* ナビゲーションリンクの下線(ホバーアニメーション用) */
.c-gnav__a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 0.3px;
background: #fff; /* 白い下線 */
bottom: -1px;
transform: scale(0, 1); /* 初期状態で非表示 */
transform-origin: left top;
transition: transform 0.3s; /* アニメーション */
}
/* ホバー時に下線を表示 */
.c-gnav__a:hover::after {
transform: scale(1, 1);
}
/* 現在のページに下線を常時表示 */
.c-gnav__a.current::after,
.c-gnav__li.current-menu-item > .c-gnav__a::after {
transform: scale(1, 1);
}
/* トップページでは現在地表示の下線を非表示にする */
.home .c-gnav__a.current::after,
.home .c-gnav__li.current-menu-item > .c-gnav__a::after {
transform: scale(0, 1) !important;
}
/* ホバー・フォーカス時の文字色変更 */
.c-gnav__li.-current,
.c-gnav__li.focus,
.c-gnav__li:hover {
color: #fff;
}
/* サブメニューでは下線アニメーションを無効化 */
.sub-menu .c-gnav__a::after {
content: none !important;
display: none !important;
background: none !important;
transform: none !important;
transition: none !important;
}
コメント