PlusOne Blog

【HTML,CSS】ページ内リンクでのナビメニュー分、表示位置を下げる方法

画面トップにナビメニューを固定する方法をよくみますね。
ナビメニューを画面トップに固定すると、ページ内リンクなどでページ遷移したとき、リンク先を表示したときナビメニュー部分に隠れてしまいますね。
 

 
これを回避するには、ナビメニューの高さ分、リンク先の表示位置を下げてあげる必要があります。
js でも css でも可能ですが、今回は css での方法をご紹介いたします。
 
説明と言っても、設定はいたって簡単で、
リンクさせる要素に対して、padding-left と margin-left を次のように設定してあげるだけです。
(ここでは、画面トップから下げたい長さ(ナビメニューの高さ)を 120px とします。)

  elementSelector {
    padding-top:120px;
    margin-top:-120px;
  }

 
padding で、上部高さ部分をかせいで、margin で実際の高さに戻してあげています。
 
ここで、注意がいるのは、padding-top を指定しているので、背景などが必要な場合は、もう一つ親の wrap を作成して、そこにリンクを貼るなどのひと手間が必要になります。
 
 
※この方法で対応したら、padding-top下の要素のクリックイベントが発生しなくなる不具合で生じたので、その解決法はこちら

この記事を読む
記事一覧に戻る