こんにちは、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弾の「グローバルナビメニューの設定方法とカスタマイズ」をご覧下さい。
読んでいただき、ありがとうございました。
コメント