戦略的ホームページ

WEBサイトのヘッダーメニューデザインにアンダーラインをつける方法

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にすることで下線は表示とされる–*/
}

ワードプレスのテーマにもよりますが、上記アレンジすれば、設置できます。

忘備録として、控えておきます。

ABOUT ME
HICO
HICO
ほんの小さな感動が、誰かの人生をちょっと変える。そんな食体験を通して人類に貢献することが僕の使命です。目標は「100年レストラン事業」。お金も才能も人脈もありませんが、実現させるために日々、愚直に考えていることを綴ってます。
人生のアフターコロナ対策、お決まりですか?

コロナショックにより、人の暮らしから考え方、働き方は大きく変わるのでしょう。

どうなるのか?というよりも、どう生きたいのか?

たいせつな人たちと楽しく人生を送る為に必要な資産と、生き方を、ない頭で頑張って考えてます。あなたのお役に立てれば幸いです!