H5C3寫一個酷炫的手風琴選單

AngryKnight發表於2018-07-29
原文網址 : https://juejin.im/post/5b5d4f4e5188251967308c3a
H5

  你有沒有這樣的經歷，剛開始學習前端知識，作為一個初學者，JS學的不精，僅僅掌握HTML5和CSS3，但是又很嚮往也一些很有逼格的東西，拿給同學看。

  反正我是有這樣的小心思，畢竟不想裝逼的程式設計師不是好程式設計師（笑）σ`∀´)σ  

  所以這裡介紹一個簡單的不能再簡單的，僅用H5和C3就實現的手風琴選單，滿足一下同學們的虛榮心。 

首先演示一下效果

H5C3寫一個酷炫的手風琴選單

  怎麼樣酷炫吧（並不）Σ(｀L_｀ )，哎，沒辦法，即要程式碼簡單又要效果酷炫，這是強人所難啊，，，

  不過只是跟同樣是初學者的同學裝裝逼還是能滿足的 _(:3 」∠ )_

  好了，廢話不多說，介紹一下怎麼實現的吧

程式碼

  首先是html部分

<div class="container">   
 <div class="list">      
  <p>首頁</p>     
   <div class="menu"></div> 
  </div>    
  <div class="list">   
   <p>個人</p>      
    <div class="menu"></div>
  </div>    
  <div class="list"> 
  <p>推廣</p>     
   <div class="menu"></div>  
  </div>  
  <div class="list">    
  <p>專欄</p>    
  <div class="menu"></div> 
  </div>
</div>複製程式碼

  這個很簡單，就是構造一下網站的結構，當然真實網站使用的手風琴選單很詳細，環環相扣，這裡只是介紹怎麼實現，想要豐富網站，還請同學自己下去嘗試

CSS部分

 .container {         
   width: 150px;       
   height: 500px;          
   margin: 100px auto;     
  }  
    
  p {          
     height: 35px;       
     line-height: 35px;    
     padding-left: 30px;       
     font-size: 14px;         
     color: #fff;         
     background-color: rgb(109, 175, 241);     
     transition: all 1s;       
  }   
 
  .menu {          
     height: 0;       
     background-color: rgb(164, 188, 209);          
     transition: all 1s;      
  }     
  
  .list:hover p {       
    background-color: purple;    
    }    
  
  .list:hover .menu {      
      height: 100px;     
   }複製程式碼

  因為本次實現是僅僅依靠html5和css3，所以css要重點介紹

  CSS就是用來網頁佈局和美化網頁的

  首先為整個容器設定寬高，為了演示效果，所以我讓它居中

  接下來為了演示的時候看的比較清楚，給各個標籤都新增了顏色，顏色都是我隨意配的，實際網頁設計時，要注意配色之間的美觀。

  重點

  實現手風琴選單主要是通過hover選擇器和transition屬性的結合利用，下面詳細介紹一下

  hover偽類選擇器

  所謂的偽類，也就是不是真正的類，或者說在頁面中不存在一個class = “xxx”， 所以叫它偽類。

  作用：用於選擇滑鼠指標浮動在上面的元素。

  本文中將滑鼠放上選單後，選單變色就是利用hover偽類選擇器，在滑鼠放上一個標籤後，顯示hover後的另一個標籤，當然也可以直接在hover選擇器中寫屬性。

  CSS3 trantion 屬性

  css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠單擊、獲得焦點、被點選或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。”

  transition: all 1s;的意思就是通過1s所有完成屬性。

  我原來定義div標籤的高為0px，在.list:hover .menu中定義高為100px，所以當我把滑鼠指標放到 ment元素上，其寬度會從 0px 逐漸變為 100px，既實現了手風琴選單的效果。


後記

  其實這種僅用h5和c3實現的手風琴選單效果還是很差的，所以如果想要成為網頁製作大師還是要更加努力的攝取知識，這只是皮毛罷了。

  最後祝大家身體健康，謝謝(`・ω・´)



  

  


相關文章