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

25-03-02 14

本文将带您了解关于用css和js实现侧边菜单栏点击和鼠标滑动特效的新内容，同时我们还将为您解释侧边栏css的相关知识，另外，我们还将为您提供关于Bootstrap导航条可点击和鼠标悬停显示下拉菜单、B

本文将带您了解关于用css和js实现侧边菜单栏点击和鼠标滑动特效的新内容，同时我们还将为您解释侧边栏 css的相关知识，另外，我们还将为您提供关于Bootstrap导航条可点击和鼠标悬停显示下拉菜单、Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码、Canvas之鼠标滑动特效、CSS 伪类实现的鼠标滑动图片链接_导航菜单的实用信息。

本文目录一览：

用css和js实现侧边菜单栏点击和鼠标滑动特效（侧边栏 css）
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Canvas之鼠标滑动特效
CSS 伪类实现的鼠标滑动图片链接_导航菜单

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

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

jq:

$(''ul#ul li'').click(function(){
  var index = $(this).index();
  $(this).addClass(''a_Onclick'').siblings().removeClass(''a_Onclick'');
})

主要想法：在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的属性，总体来说还不太会用。

Bootstrap导航条可点击和鼠标悬停显示下拉菜单

使用Bootstrap导航条组件时，如果你的导航条带有下拉菜单，那么这个带下拉菜单的导航在点击时只会浮出下拉菜单，它本身的href属性会失效，也就是失去了超链接功能，这并不是我想要的，我希望导航条的链接可以正常打开它的链接，但又需要下拉菜单功能，开始折腾~

首先解决带下拉菜单的导航条可以点击问题，下拉菜单效果是JS实现的，分析bootstrap.js文件发现，Bootstrap把下拉菜单写成了一个JQuery插件，在dropdown代码段中找到了关键的几句：

rush:js;"> // APPLY TO STANDARD DROPDOWN ELEMENTS // ===================================

$(document)
.on('click.bs.dropdown.data-api',clearMenus)
.on('click.bs.dropdown.data-api','.dropdown form',function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api',toggle,Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api',toggle + ',[role=menu]',Dropdown.prototype.keydown)

找到几句关键代码后，想到了解决办法，只要把其中click.bs.dropdown.data-api事件关闭就OK了，代码如下：

rush:js;"> $(document).ready(function(){ $(document).off('click.bs.dropdown.data-api'); });

以上代码测试有效，导航条可点击问题解决，下面解决鼠标悬停弹下拉菜单问题，这个相对简单些，用JQuery的鼠标事件就可实现，代码如下：

rush:js;"> $(document).ready(function(){ dropdownopen();//调用 }); /** * 鼠标划过就展开子菜单，免得需要点击才能展开 */ function dropdownopen() {

var $dropdownLi = $('li.dropdown');

$dropdownLi.mouSEOver(function() {
$(this).addClass('open');
}).mouSEOut(function() {
$(this).removeClass('open');
});
}