Day28 切版笔记 - 侧边选单

今天来练习切侧边选单

运用到的观念:

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

以上为个人学习笔记整理
若有错误，欢迎指正