※この記事にはプロモーションが含まれています
googleのデザインは、よくも悪くもシンプルですよね。
飽きがこない、という点では、appleのMacのようにシンプルで洗練されたデザインといえるかもしれません。
改めて、googleのデザインを見ると、シンプルな中にフォントのバランスだとか、配置が、国内のサイトとは明らかに違う考えのもと設置されているのがわかりました。
特にヘッダーメニューデザインは、秀逸です。
誰にでも作れる構成ながら、誰にでも作れない雰囲気を醸し出してる。
ブランディングの強さです。
＜参考：株式会社メジルシ様＞
目次
WEBサイトのヘッダーメニューデザインにアンダーラインをつける方法
そんなグーグルのサイトのようなメニューデザインをややアレンジして、設置してみましょう。
以下をスタイルシートに記述します。
/* ヘッダーの各メニューに引くアンダーラインのスタイルとアニメーションのスタイル */
.header > a:after {
content: “”;
position: absolute;
top: 70%;
right: 25px;
width: calc(100% – 45px);
height: 3px;
background: #02a8c9;
-webkit-transform: scaleX(0); /*–ここを0にすることで下線は非表示となる–*/
-ms-transform: scaleX(0); /*–ここを0にすることで下線は非表示となる–*/
transform: scaleX(0); /*–ここを0にすることで下線は非表示となる–*/
-webkit-transition: all .15s; /*–0.15秒かけて下線が表示される–*/
transition: all .15s; /*–0.15秒かけて下線が表示される–*/
}/* ヘッダーの各メニューにカーソルをホバーするとアンダーラインがアニメーションで出現するスタイル */
.header > a:hover::after {
content: “”;
position: absolute;
top: 70%;
right: 25px;
width: calc(100% – 45px);
height: 3px;
background: #02a8c9;
-webkit-transform: scaleX(1); /*–ここを1にすることで下線は表示される–*/
-ms-transform: scaleX(1); /*–ここを1にすることで下線は表示とされる–*/
transform: scaleX(1); /*–ここを1にすることで下線は表示とされる–*/
}
ワードプレスのテーマにもよりますが、上記アレンジすれば、設置できます。
忘備録として、控えておきます。