こんにちは、ikuzo(いくぞう)です。
今回は「Cocoon グローバルナビメニュー」シリーズの第3弾として、
マウスオーバーでメニューの下にアンダーラインが出てくる方法を紹介したいと思います。
「にゅるっ」とアンダーラインが出るようにします。
グローバルナビメニューの第1弾と第2弾はこちらです。
第1弾はブログを始めて2ヶ月目に書いた意欲作です（笑）
第1弾「グローバルナビメニューの幅を調整する方法」
第2弾「グローバルナビメニューの設定方法とカスタマイズ」
メニュー項目の余白を調整
下準備としてメニュー項目の左右に任意の余白を作ります。
「Cocoon 設定」の「ヘッダー」タブを押して、
下の方にある「メニュー幅をテキストに合わせる」に チェックを入れます。
これでメニュー項目の間隔が均等になります。
左右の余白を大きくしたり小さくするCSSは、こちらをお使い下さい。
/*グローバルナビメニュー メニュー項目の間隔*/
#navi .navi-in>ul>li>a{
padding: 0 2.0em;
}
上のCSSは、項目の両側に2文字分（2.0em）の余白を設けてあります。
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弾の「グローバルナビメニューの設定方法とカスタマイズ」をご覧下さい。
読んでいただき、ありがとうございました。
コメント