用css和js实现侧边菜单栏点击和鼠标滑动特效

最新推荐文章于 2023-11-03 23:30:27 发布

avsibao194196

最新推荐文章于 2023-11-03 23:30:27 发布

阅读量714

点赞数

原文链接：http://www.cnblogs.com/Zxq-zn/p/11372732.html

版权

1点击效果：

2关键代码：

css:

#div{
  display:inline-block;
  width:100px;
  height:150px;
  border-radius: 5px;
  blackground-color:#fdfcf8;
}
#ul{
  list-style: none;
  padding:0px;
  margin:0px;
}
#ul li{
  display:block;
  height:30px;
  text-align:center;
}
#ul li a{
  display:block;
  text-decoration: none;
  text-align: center;
  color:black;
}
#ul li a:visited,#ul li a:hover{
  background-color:darkgray;
}
.a_Onclick{
  border-left-style: solid;
  border-left-color:red;
  border-left-width:5px;
}

js:

var a = document.getElementsByTagName("a");
for(let i=0;i<a.length;i++){
  a[i].onclick=function(){
    for(let j=0;j<a.length;j++){
      if(i==j){
        a[i].className="a_Onclick";
      }else{
        a[j].className="";
      }
    }
    }
  }

View js

主要想法：在css中设定一个链接被点击效果的css样式，在用js监听，当有一个链接被点击时，该链接css样式改变，同时其兄弟节点的css样式也随之改变。

3鼠标滑动造成底部线条滑动特效：

transform:scaleX(x);线条缩放（通过x轴）的效果,x为0时显示，x为1时隐藏；

再用:before和:after两个伪类来定义鼠标滑动的状态；

transition：过渡的属性

html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>侧边栏效果</title>
  <link rel="stylesheet" href="../css/nav.css">
</head>
<body>
  <div id="div">
    <ul id="ul">
      <li>第一条</li>
      <li>第二条</li>
      <li>第三条</li>
      <li>第四条</li>
      <li>第五条</li>
    </ul>
  </div>
</body>
</html>

View Code

css:

#div{
width:200px;
margin:0 auto;
}
#ul{
    list-style: none;
    width:200px;
}
#ul li{
    position:relative;
  display:block;
  height:50px;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
#ul li::before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:200px;
    height:2px;
    background:#FFE300;
    transition:transform .5s;
    transform:scaleX(0);
    transform-origin:100% 0;//改变线条运动方向
}
#ul li:hover::before{
    transform:scaleX(1);
    transform-origin:0 0;
}

View Code

总结：查了百度，学到了这几个css3的属性，总体来说还不太会用。

转载于:https://www.cnblogs.com/Zxq-zn/p/11372732.html

avsibao194196

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用css和js实现侧边菜单栏点击和鼠标滑动特效

1点击效果：2关键代码：css:#div{ display:inline-block; width:100px; height:150px; border-radius: 5px; blackground-color:#fdfcf8;}#ul{ list-style: none; padding:0px; mar...
复制链接

扫一扫