戦略的ホームページ

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(ぞろ屋)
バーテンダー➡料理人➡シニアソムリエ➡飲食店運営➡トップセールス・マーケター➡WEB制作/ECサイト運営/WEBライティング。 幅広い経験とスキルを活かしデザイナーやエンジニアでは作れない持続性のある戦略的サイト構築が得意。実はコンテスト受賞経験もあるシニアソムリエとしての顔も持つ。
人生のアフターコロナ対策、お決まりですか?

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

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

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