提姆寫程式

0%

CSS 筆記 - 金魚系列 07 - 導覽列 navbar

發表於 更新於 分類於 Disqus：
必切!超實用導覽列！

nav

每個網頁一定都有導覽列，這麼實用一定要來記錄一下。

HTML 架構

有 LOGO、導覽列選項、搜尋列三個區域，為了以後直接帶指定連結，這邊除了搜尋按鈕外，都使用 a 標籤。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="header">
  <div class="container">
    //Logo
    <a href="#" class="logo">
      <i class="fab fa-spotify fa-3x"></i>
      <span>Spotify</span>
    </a>
    //導覽列選項
    <nav class="navbar">
      <a href="#" class="item">金魚系列 VII</a>
      <a href="#" class="item">每個網站都有的導覽列</a>
      <a href="#" class="item">選項一定要有互動</a>
      <a href="#" class="item">這個不會不行</a>
    </nav>
    //搜尋列
    <form class="navSearch">
      <input type="search" placeholder="找不到東西的搜尋列" />
      <button><i class="fas fa-search"></i></button>
    </form>
  </div>
</div>

CSS 樣式

重點記錄，

layout

主要共同元素部分為 a 連結，所以把 a 連結直接拉出來設定，下方樣式就不必重工。

1
2
3
4
5
a {
  text-decoration: none;
  color: #26ff93;
  font-weight: 300;
}

標誌區塊主要記錄用 flex 的直向對齊的寫法。

1
2
3
4
5
6
7
8
9
10
11
12
13
.logo {
  margin-right: 1em;
  display: flex;
  align-items: center;
  .fa-spotify {
    padding-right: 0.5em;
    color: #26ff93;
  }
  span {
    font-size: 26px;
    font-weight: 500;
  }
}

導覽列

  • flex 這個切版聖品，當然要使用 flex-grow 讓每個區塊都一樣寬，這樣就不用再計算啦!
  • flex + margin:auto，會置中對齊。
  • 互動的部分在底線一開始不要填色，但預留空間，這樣在 hover 時，就不會突然增加空間而改變視覺效果(會變晃動)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.navbar {
  display: flex;
  align-items: center;
  margin: auto;
  .item {
    flex-grow: 1;
    padding: 20px;
    border-bottom: 5px solid transparent;
    transition: 0.3s;
    &:hover {
      border-bottom: 5px solid #26ff93;
    }
  }
}

搜尋列

  • 一樣使之直向對齊，並把共同項目拉出來設定，避免重工。
  • 將 input 跟 button 靠外側的兩邊設定為圓角，這樣比較好看。
  • 設定兩元素的寬度比例。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.navSearch {
  display: flex;
  align-items: center;
  margin-left: auto;
  input,
  button {
    border: none;
    outline: none;
    height: 30px;
    background-color: #ffffff;
  }
  input {
    padding-left: 12px;
    width: 80%;
    border-radius: 100px 0 0 100px;
  }
  button {
    width: 20%;
    border-radius: 0 100px 100px 0;
    cursor: pointer;
  }
  .fa-search {
    color: #555555;
    &:hover {
      color: #26ff93;
      transition: all 0.3s;
    }
  }
}

這樣就完成了一個假的 spotify 的網頁導覽列囉!

CodePen https://codepen.io/hnzxewqw/pen/zYrMxzK

參考資料