iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 10
1
Modern Web

喪屍黑白切系列 第 10

Day 10 | 我常卡住的導覽列 - Navbar

今天要來講 金魚都能懂的網頁切版 : 導覽列 NO007
切版網頁,免不了得製作導覽列,
算是非常非常基本的要求,
前期我在練習切版的時候,常常莫名其妙的就卡住做不出來。

本篇關鍵字

  • ullia
  • :hover
  • display: flex, justify-content, align-items
  • transition

範例檔


HTML

<header class="main-header">
  <div class="container">
    <h1><a href="#">Zombie@Dump</a></h1>
    <nav>
      <ul class="main-menu">
        <li><a href="#">關於我們</a></li>
        <li><a href="#">作品們</a></li>
        <li><a href="#">聯絡我們</a></li>
      </ul>
    </nav>
  </div>
</header>

CSS

a {
  display: block;
  text-decoration: none;
  color: #fff;
}

.main-header {
  width: 100%;
  background-color: #E83015;
}

.container {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

.main-header h1 {
  line-height: 60px;
  margin: 0 15px;
}

.main-menu {
  display: flex;
}

.main-menu li {
  position: relative;
  transition: .5s;
}

.main-menu li a {
  padding: 0 15px;
  line-height: 60px;
}

.main-menu li::after {
  content: '';
  position: absolute;
  height: 4px;
  left: 50%;
  right: 50%;
  bottom: 0;
  background-color: #fff;
  transition: .5s;
}

.main-menu li:hover {
  background-color: #b02914;
}

.main-menu li:hover::after {
  left: 0;
  right: 0;
}

喪屍分解

  • 使用display: flex 達成元素橫向排列以及靠邊排列
  • justify-content
    justify-content: flex-start;
    justify-content: flex-end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;
    
    (詳細內容可以看這裡
  • align-items(雖然沒有用到)
    align-items: flex-start;
    align-items: flex-end;
    align-items: center;
    
    (詳細內容可以看這裡
  • 使用 line-height 做到單行垂直置中
  • 利用 ::after 搭配left, right 製作出元素被 :hover 時線條由中間向外長的效果(可以自己試試看讓他由外往中間長)
  • 使用transition 設定 :hover 效果時間

以上就是今天的內容,如果有講不對的地方再請各位留言讓我知道,謝謝。
明天要講的是 Navbar - 多層次選單。


上一篇
Day 09 | 給我動起來 - SVG animation
下一篇
Day 11 | 我包你啊你包我 - 多層次選單
系列文
喪屍黑白切30

尚未有邦友留言

立即登入留言