# 進階navbar製作
接下來是navbar的應用
## responsive navbar
其實現在的navbar利用flexbox也還算responsive，但我私心希望它能在寬度太小的時候縮成彈出式的hamburger menu（漢堡選單），以蘋果官網舉例

<div style="text-align:center;">⬇️</div>


就拆成三個部分講吧~

### 漢堡製作

這部分還算簡單，就一個漢堡

<div class="hamburger-toggle">
    <span class="bar-1"></span>
    <span class="bar-2"></span>
    <span class="bar-3"></span>
</div>

再來是CSS

.hamburger-toggle {
    position: absolute;
    width: 1.8rem;
    height: 1.3rem;
    top: 2rem;
    right: 3rem;
    display: none; /*預設不顯示*/
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end; /*因為bar有長有短，所以靠左*/
}
.hamburger-toggle span {
    height: 3px;
    width: 100%;
    border-radius: 10px;
    background-color: white;
}
.hamburger-toggle .bar-3 {
    width: 80%; /*裝逼造型*/
}

大概長這樣


還不錯看ㄟ( •̀ ω •́ )y

### Make it Responsive
再來是偵測到視窗過小的時候，把navbar切成hamburger，涉及CSS跟JS
CSS:

@media (max-width: 600px) {
    .hamburger-toggle {
        display: flex; /*顯示漢堡*/
    }
    .hamburger-toggle:hover {
        cursor: pointer; /*因為漢堡是div，游標盤旋在它上面不會變成手掌造型的pointer，所以要補上*/
    }
    .navbar-links {
        display: none; /*在漢堡被點前不顯示*/
    }
    nav {
        flex-direction: column; /*把標題跟連結改成直行排列*/
        align-items: flex-start;
        padding-top: 2rem;
    }
    .navbar-links {
        width: 100%; /*使連結與螢幕等寬*/
    }
    .navbar-links ul{
        flex-direction: column; /*讓連結各自直行排列*/
        width: 100%;
    }
    .navbar-links ul li{
        width: 100%;
    }
    .navbar-links li {
        text-align: center;
    }
    .navbar-links.active {
        display: flex; /*看到JS你就懂這行了XD*/
    }
}

JS:

const hamburgerToggle = document.querySelector(".hamburger-toggle");
const navbarLinks = document.querySelector(".navbar-links");

hamburgerToggle.addEventListener("click", () => {

    navbarLinks.classList.toggle("active"); 
    //class改成active後就執行.navbar-links.active的css，也就是display: flex
})

會長這樣(內建螢幕錄影在改變視窗大小的時候就會跳掉，所以就不錄變成漢堡的瞬間)


### 酷酷的動畫
接下來就是添加動畫，主要分成漢堡變成叉叉跟navbar連結滑下來

#### 漢堡動畫
JS再次用了classList使bar在按下後執行動畫

const hamburgerToggle = document.querySelector(".hamburger-toggle");

hamburgerToggle.addEventListener("click", () => {
        hamburgerToggle.classList.toggle("toggle"); //class改成toggle，語法看起來其實有點小彆扭XD
    })

這樣就會在按下漢堡時就會從執行.hamburger-toggle span更改成執行.toggle bar，現在只需要在CSS把新的.toggle bar打出來就好

.hamburger-toggle span {
    transition: all 0.3s ease; /*要在原處加上這行，不然不會有過場*/
}

.toggle .bar-1 {
    transform: rotate(-45deg) translate(-4.2px, 7px); /*旋轉平移變成叉叉*/
}

.toggle .bar-2 {
    transform: rotateX(90deg); /*消失*/
}

.toggle .bar-3 {
    transform: rotate(405deg) translate(-7.4px, -7px) scaleX(125%); /*也是旋轉平移變成叉叉，只是要伸到跟bar-1一樣長*/
}

這樣姑且就完成了漢堡動畫

#### navbar links 動畫
其實只要加入以下幾行

.navbar-links {
    display: flex; /*因為要滑入，所以顯示出來*/
    position: absolute; /*要滑入就不待在原本的flexbox中了*/
    top: 3.5rem; /*位在navbar下方*/
    transition: transform 0.5s ease-in; /*滑出過場*/
    transform: translateY(-200%); /*預設位於視窗之外*/
}
.navbar-links.active {
    transition: transform 0.5s ease-in; /*滑入過場*/
    transform: translateY(0%); /*點擊時從上方滑到navbar下方*/
}

就能有酷酷的進場動畫了


其實因為預設是會先有個滑出的特效，所以有個小bug，使用者一進來會看到navbar links向上滑走，但基本上不影響使用(應該吧)

## 小小的結語
到這邊我的網頁已經差不多完成了，再做些微調就能正式push並運行了，所以這大概是最後一篇歷程，點下一篇的連結就能回到主頁看結論 o(*￣▽￣*)ブ

---

<ul style ="display: flex; flex-direction: row; width: 100%; justify-content: space-between;margin: 0; padding: 0;">
<li style="list-style: none;"><a href = "https://hackmd.io/@WeberChang/HJsIMGYFF" >上一篇</a></li>
<li style="list-style: none;"><a href = "https://hackmd.io/@WeberChang/rJBpwRsut">主頁</a></li>
<li style="list-style: none;"><a href = "https://hackmd.io/@WeberChang/rJBpwRsut">下一篇</a> </li>
</ul>