今天來練習切側邊選單

運用到的觀念:

1. 使用font awesome圖示
2. 使用google fonts字體
3. flexbox
4. linear-gradient設定漸層背景色彩
5. 區塊元素和行內元素特性
6. 加號選取器
7. box-shadow設定陰影效果
8. :hover 搭配transform:scale()做出互動效果

HTML結構

    <div class="side-menu">
      <form>
        <input type="search" placeholder="請輸入關鍵字">
        <button><i class="fas fa-search"></i></button>
      </form>
      <nav>
        <a href="#">
          <i class="fas fa-running"></i>
          鐵人賽
        </a>
        <a href="#">
          <i class="fas fa-smile"></i>
           切版練習
          </a>
        <a href="#">
          <i class="fas fa-running"></i>
          自煮生活
        </a>
        <a href="#">
          <i class="fas fa-smile"></i>
          保持好心情
        </a>
        <a href="#">
          <i class="fas fa-running"></i>
          記得要運動
        </a>
      </nav>
    </div>

CSS結構

設定css rest
載入google fonts字體連結
載入 font awesome圖示連結

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap");
@import url("https://pro.fontawesome.com/releases/v5.10.0/css/all.css");

* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Noto Sans TC", sans-serif;  
}

設定高度是滿版

html, body{
  height: 100%; 
}

設定背景色

body{
  background-color: #546377;
}

目前的畫面

2. 設定side-menu區塊高度寬度及背景顏色
   將side-menu的form區塊和nav區塊內容設成由上到下排列
   nav區塊內的a標籤改成區塊元素 讓a標籤會往下排列而不會排列在同一行

.side-menu{
  width: 300px;
  height: 100%;
  background-image: linear-gradient(0deg, #3381b0, #c2196c);
  display: flex;
  flex-direction: column;
  }
  
  nav a{
  display: block;
  padding: 10px;
  color:#fff; 
  text-decoration: none;
}

3. 使用偽元素給a標籤新增不會連到邊框的下底線
   使用絕對定位和相對定位 將這條底線定位在nav區塊a標籤內
   left和right設定10px 是因為有設定padding:10px

nav a{
  display: block; 
  padding: 10px;
  color:#fff; 
  text-decoration: none;
  position: relative; 
}


 nav a + a::before{
  content:''; 
  position:absolute;
  border-top: 1px solid #fff;
  left:10px;
  right:10px; 
  top:0; 
}

4. 在form區塊設定display:flex;將input和button並排貼在一起
   並調整input和menu的內距

.side-menu form{
  display: flex; 
  margin: 0 10px;
  }
.side-menu form input, 
.side-menu form button{
  border: none; 
  color: #fff;
  padding:5px 10px;  
} 

調整input 和button的寬度

 .side-menu form input{
  width:230px;
}

.side-menu form button{
  width:50px; 
}

將input 和button 的背景顏色改成透明色
form框線設成圓弧形

.side-menu form{
  display: flex; 
  margin: 0 10px ;
  border-radius: 100px;
  border:1px solid rgb(255,255,255,.4);  
}

.side-menu form input, 
.side-menu form button{
  border: none; 
  background-color: transparent; 
  color: #fff;
  padding:5px 10px; 
} 

5. 使用:focus 改掉預設點擊到欄位會出現的黑色框線

.side-menu form input:focus , 
.side-menu form button:focus{
  outline:none; 
}

6. side-menu區塊新增上下padding 因為新增padding畫面高度被改變了, 要設定bordor-box讓畫面調整回滿版
   使用box-shadow設定區塊有陰影效果

.side-menu{
  width: 300px;
  height: 100%;
  padding:50px 0;
  box-sizing: border-box; 
  background-image: linear-gradient(0deg, #3381b0, #c2196c);
  display: flex;
  flex-direction: column; 
  box-shadow: 5px 0px 10px hsla(240, 40%, 15%, .6); 
}

7. 設定碰到a連結區塊時 icon圖示會出現 且文字會往右移動

nav a .fas {
  margin-right: -1.1em;
  transform:scale(0);
  transition:.3s;
}

nav a:hover .fas{
 margin-right: 0em;
 transform:scale(1);
}

參考資料: 金魚都能懂的這個網頁畫面怎麼切 : 側邊選單怎麼切, 深入理解 CSS 漸層 ( CSS Gradient ), 親代選取器之妹妹選取器與鞭炮串選取器, box-shadow

以上為個人學習筆記整理
若有錯誤，歡迎指正