こんにちは、ikuzo(いくぞう)です。
今回は、Cocoonのグローバルナビメニューにマウスオーバー（ホバー）すると、
メニューの下にアンダーラインが出る方法を紹介します。
グローバルナビメニューの設定方法やカスタマイズのやり方はこちらの記事をご覧ください。
メニューにアンダーラインを出す前の下準備
グローバルメニューにアンダーラインを出す前に下準備が必要な場合があります。
この2つは必要があれば行ってください。
1, メニュー項目の左右の余白を均等にする
2, マウスオーバー時にメニューの色が薄くなるのをやめる
メニュー項目の左右の余白を均等にする
メニュー項目の左右の余白が均等でない例です。
余白を均等にするとこのようになります。
余白を均等にする設定は「Cocoon 設定」の「ヘッダー」タブで行います。
下の方にある「メニュー幅をテキストに合わせる」に チェックを入れて「変更をまとめて保存」を押します。
これでメニュー項目の間隔が均等になります。
間隔を大きくしたり小さくしたい場合は、こちらのCSSを使います。
/*グローバルメニュー メニュー項目の左右の余白*/
#navi .navi-in>ul>li>a{
padding: 0 2.0em;
}
Cocoonのデフォルトはメニュー項目の左右にそれぞれ1.4em（1.4文字分）の余白があります。
それを2.0em（2文字分）にするのが上のCSSです。
数字はお好みで変更してください。
マウスオーバー時にメニューの色が薄くなるのをやめる
Cocoonのグローバルメニューはマウスオーバー時に項目の色が薄くなります。
メニューにアンダーラインを出すので、色を薄くする必要はないという方は次のCSSを使ってください。
/*マウスオーバー時にメニューの色が薄くなるのをやめる*/
#navi .navi-in a:hover {
background-color: rgb(255 255 255 / 0);
}
上のCSSを使うとマウスオーバー時に色が薄くなりません。
マウスオーバーでメニューにアンダーラインが出てくるCSS
マウスオーバーでグローバルメニューにアンダーラインが出てくるCSSがこちらです。
/*マウスオーバー時にメニューにアンダーラインを出す*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 0;/*線の位置*/
height: 2px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #fcf404;/*線の色*/
transform: scale(0,1);/*マウスオーバー前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}
#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}
上記CSSで、マウスオーバー時に真ん中からアンダーラインが出てきます。
「線の高さ」「線の色」「秒数」は、お好みで変更してください。
真ん中ではなく、アンダーラインを左から出すCSSはこちらです。
/*マウスオーバー時に左からアンダーラインを出す*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 0px;/*線の位置*/
height: 2px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #fcf404;/*線の色*/
transform: scale(0,1);/*マウスオーバー前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
transform-origin: left;/*線を左側から出す*/
}
#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}
選択中の項目にアンダーラインが出たままにするCSS
先ほどのCSSは、マウスオーバー時のみアンダーライン出てきます。
それとは別に、選択中のメニュー項目にアンダーラインを出したままにするCSSです。
/*選択中のメニュー項目にアンダーライン*/
.current-menu-item:not(:first-child):after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 0px;/*線の位置*/
height: 2px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #fcf404;/*線の色*/
}
一番左の項目（ここでは“ホーム”）だけはアンダーラインが出たままにならないようにしてあります。
一番左も出たままにするには “not(:first-child):” の部分を削除してください。
コメント