H5C3写一个酷炫的手风琴菜单

最新推荐文章于 2022-03-20 10:56:47 发布

weixin_34235135

最新推荐文章于 2022-03-20 10:56:47 发布

阅读量351

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5b5d4f4e5188251967308c3a

本文介绍如何仅用HTML5和CSS3实现简单的手风琴菜单效果，包括代码示例及关键CSS属性解释。

你有没有这样的经历，刚开始学习前端知识，作为一个初学者，JS学的不精，仅仅掌握HTML5和CSS3，但是又很向往也一些很有逼格的东西，拿给同学看。

反正我是有这样的小心思，毕竟不想装逼的程序员不是好程序员（笑）σ`∀´)σ

所以这里介绍一个简单的不能再简单的，仅用H5和C3就实现的手风琴菜单，满足一下同学们的虚荣心。

首先演示一下效果

怎么样酷炫吧（并不）Σ(｀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的属性值。”