本日小作品：
https://drive.google.com/file/d/1yAdpP_hzVZSL5KhaaWkAP0A3p3D0N43o/view?usp=sharing

padding: 10px;

漢堡選單的圖片大小是24px的正方形，一般來說人的手指點擊約為44px，所以使用padding讓高度變成44px方便點擊，這也是RWD的細節之一。

@media(max-width:768px){
	.header .nav{
		flex-direction: column;
		position: absolute;
		top: 44px;
		left: -100px;
		transition: all .6s ease;
	}
	.header .btn{
		display: block;
	}
}

當使用者使用行動裝置的時候將漢堡選單按鈕出現，導覽列整行消失。因為這次的導覽列數量很多（模擬新聞網站等等類型），所以併排成兩行之類的仍舊會看起來很吃力。做成下拉選單又太多，所以將其改變flex-direction，變成一行並使用絕對定位讓其跑到畫面之外。

.banner{
    max-width: 960px;
    margin: 0 auto;
    height: 600px;
    background-image: url(https://cdn.pixabay.com/photo/2020/09/30/17/05/road-5616457_1280.jpg);
    background-repeat: no-repeat;
	background-position: center center;
	background-color: lightblue;
}

一般來說圖片透過max-width能夠隨著原比例伸縮，但這裡希望是把圖片截去一部分，所以使用background-image來處理banner，因為是background-image，只要控制banner讓其設定好max-width，圖片多餘的部分就會自動被隱藏起來，也不會出現x軸的bar，達到RWD的效果。

var btn = document.querySelector(".btn");
btn.addEventListener("click",function(){
    var location = document.querySelector('.header .nav').style.left;
    if(location == "0px"){
        document.querySelector('.header .nav').style.left = "-100px";
    }else{
        document.querySelector('.header .nav').style.left = "0px";
    }
},false)

在漢堡選單按鈕上綁定點擊事件，透過js改變絕對定位的left值，如果原本是收闔則打開，反之則收闔。

－－－

備註：
因為在CodePen使用瀏覽器內建的手機模擬好像會跑不太出來，所以本次就直接上傳壓縮過後的原始檔案。

－－－

本日結語：
今天是二十五天，除了導覽列和Banner的RWD效果之外，主要是練習了側邊選單的做法，如有寫錯之處麻煩各路高手指教><。