【Cocoon】グローバルメニューにマウスオーバーでアンダーライン登場

グローバルメニューにマウスオーバーでアンダーライン登場 Cocoon

こんにちは、ikuzo(いくぞう)です。

今回は「Cocoon グローバルナビメニュー」シリーズの第3弾として、

マウスオーバーでメニューの下にアンダーラインが出てくる方法を紹介したいと思います。

マウスオーバーでグローバルメニューの下に線が出てくる
「にゅるっ」とアンダーラインが出るようにします。

第1弾と第2弾はこちらです。第1弾はブログを始めて2ヶ月目に書いた意欲作です(笑)

 

第1弾「グローバルナビメニューの幅を調整する方法」

【Cocoon】グローバルナビメニューやサイトの幅を調整・変更する

第2弾「グローバルナビメニューの設定方法とカスタマイズ」

【Cocoon】グローバルナビメニューの設定方法とカスタマイズ
スポンサーリンク

メニュー項目の余白を調整

下準備としてメニュー項目の左右に任意の余白を作ります。

「Cocoon 設定」の「ヘッダー」タブを押して、

下の方にある「メニュー幅をテキストに合わせる」に チェックを入れます。

「メニュー幅をテキストに合わせる」にチェックを入れる

これでメニュー項目の間隔が均等になります。

左右の余白を大きくしたり小さくするCSSは、こちらをお使い下さい。

/*グローバルナビメニュー メニュー項目の間隔*/
#navi .navi-in>ul>li>a{
padding: 0 2.0em;
}

 

上のCSSは、項目の両側に2文字分(2.0em)の余白を設けてあります。

メニュー項目の両側に2文字分の余白を設けた

Cocoonのデフォルトは“1.4em”ですので、数字を変えてお好みの間隔に調整して下さい。

にゅるっとアンダーラインが出てくるCSS

/*グローバルナビメニュー マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 1px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #1b68ae;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

このCSSを、Cocoon Childのスタイルシートに貼り付けます。

すると、マウスオーバーで真ん中から、にゅるっとアンダーラインが出てきます。

マウスオーバーでアンダーラインが出てきた

 

「線の位置」「線の高さ」「線の色」「秒数」などは調整・変更して下さい。

上のCSSでは真ん中から両側に線が伸びますが、左側から出したい場合はこちらを使います。

/*グローバルナビメニュー マウスオーバーで左からアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 1px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #1b68ae;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
transform-origin: left;/*線を左側から出す*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

選択中のカテゴリーがわかるアンダーライン

先ほどのCSSは、マウスオーバーした時だけアンダーライン出てきます。

それとは別に、選択中のカテゴリーにアンダーラインを出すCSSはこちらです。

/*選択中のカテゴリーにアンダーライン*/
.current-menu-item:not(:first-child):after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 1.5px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #1b68ae;/*線の色*/
}

 

カテゴリーを選択中は線が出たままになります。

カテゴリーを選択中は線が出たまま

 

なお、一番左の項目(ここでは“ホーム”)はアンダーラインが出ないようにしてあります。

出したい場合は “not(:first-child):” の部分を削除して下さい。

 

今回は以上です。グローバルメニューの設定方法などは

第2弾の「グローバルナビメニューの設定方法とカスタマイズ」をご覧下さい。

読んでいただき、ありがとうございました。

コメント