CSS

ヘッダーが追尾するメニューのアンカーリンク用CSS

スポンサードリンク
スポンサードリンク


ヘッダーが追尾するメニューを作る場合、positionで設定するのでレイヤーが一番上に来ます。
そのためヘッダー分の高さが隠れてしまい、ページ内アンカーリンクを設定しているとアンカーリンクは動作しているのだけれど、ヘッダーメニューが上から重なってテキストが見えていない…
飛ばした先が意図せず隠れてしまっている!! ということが起こります。

よくあるメニューの作り方ではありますが、地味にめちゃくちゃ調整がめんどくさいわけです。

サンプルコード

See the Pen
ヘッダーが追尾するメニューのアンカーリンク用CSS
by miccyome (@miccyome)
on CodePen.

ヘッダーが追尾するメニューのアンカーリンク用CSS

アンカー用のクラスを作り、divを設置(ブロック要素にすること)
padding-topで作ったヘッダーの高さ分を指定し、
margin-topで打ち消しするのが一番単純な方法。z-indexはつけておいたほうが無難。

Html



<div id="header">
  <div><a href="#menu1">メニュー1:コンテンツA</a></div>
  <div><a href="#menu2">メニュー2:コンテンツB</a></div>
  <div><a href="#menu3">メニュー3:コンテンツC</a></div>
</div>

<div id="menu1" class="anc"></div>
<div class="contentA">コンテンツA</div>

<div id="menu2" class="anc"></div>
<div class="contentB">コンテンツB</div>

<div id="menu3" class="anc"></div>
<div class="contentC">コンテンツC</div>

CSS



#header{
  display:flex;
  position:fixed;
  top:0;
  background:#ccc;
  height:70px;
  
}
#header > div{
  margin:15px;
}


.anc {
margin-top: -70px;
padding-top: 70px;
position: relative;
z-index:-1;
}

.contentA{
  margin-top: 70px;
  width:500px;
  height:500px;
  background:red;
}

.contentB{
  width:500px;
  height:500px;
  background:blue;
}

.contentC{
  width:500px;
  height:500px;
  background:green;
}



スポンサードリンク

CSSの勉強をするのに最適なおすすめ書籍の紹介

created by Rinker
翔泳社
¥2,838 (2021/05/29 04:24:14時点 Amazon調べ-詳細)


WordPress運営が楽になるおすすめのサーバーをご紹介

WordPressおすすめのサーバー

スポンサードリンク

-CSS
-,

© 2021 さくらいらぼWEB版 /個人ブログ