Webページにナビゲーションバーを入れてみた

f:id:endoakak:20200727195635j:plain

ナビゲーションバーを作ってみました。

f:id:endoakak:20200910184502p:plain

一番上の、About meなどが並んでいるところですね。ここをクリックすると、ページ内の各セクションに飛ぶようにします。

雛形

まずは土台づくりから。

<nav class="gnav">
  <ul class="gnav-list">
    <li class="gnav-item"><a href="#">About me</a></li>
    <li class="gnav-item"><a href="#">Works</a></li>
    <li class="gnav-item"><a href="#">Skills</a></li>
    <li class="gnav-item"><a href="#">Contact</a></li>
  </ul>
</nav>

必要な要素はこんな感じです。

ulとli要素を使って、リストを作成します。ページ内の各セクションに飛ぶようにするため、liのなかにaを入れています。

横並びにして画面上部に固定

まずはdisplay: flexでリストの要素を横並びにします。

.gnav-list {
  display: flex;
  justify-content: center;
}

続いてスクロールしても流れていかないように、position: fixed;で画面上部に固定します。

.gnav {
  position: fixed;
  width: 100vw;
}

f:id:endoakak:20200910190437p:plain

文字が重なっちゃってますが、とりあえず横並びになってます。

流石に見にくいので少しだけ整えます。

.gnav-item {
  list-style: none;
  padding: 30px;
}

f:id:endoakak:20200910190922p:plain

これで最低限ナビゲーションバーとして機能しそうです

ページ内のセクションにとばす

ナビゲーションバーの文字をクリックするとページ内の該当の部分に飛ぶようにします。

f:id:endoakak:20200910191522p:plain

上の例はかなり適当ですが、Worksを押したらWorksの部分に遷移する、という感じですね。

これをするには、各セクションにid名を設定します。

About meであれば下のようになります。

<div class="about" id="about-section">
  About me
</div>

そして、ナビゲーションバーの方でaタグのhref要素にidを指定します。
idを指定するには、id名の前に#をつけます。

<nav class="gnav">
  <ul class="gnav-list">
    <li class="gnav-item"><a href="#about-section">About me</a></li>
    <li class="gnav-item"><a href="#works-section">Works</a></li>
    <li class="gnav-item"><a href="#skills-section">Skills</a></li>
    <li class="gnav-item"><a href="#contact-section">Contact</a></li>
  </ul>
</nav>