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>
 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:;

    bottom:;

    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;

}

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

用css和js实现侧边菜单栏点击和鼠标滑动特效的更多相关文章

  1. JQuery 加载 CSS、JS 文件

    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...

  2. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  3. 来，一起让我们越来越懒，面向CSS、JS未来编程。(9.28已更新)

    2016.10.29更新 本文存在大量的错误,仅供参考. 不知不觉在前端领域马上一个年头就要过去了,然而再看看自己的代码,果然够烂,那么为什么代码一直没有用面向对象的思维去写CSS呢?首先有两点:一点 ...

  4. 如何判断一个DOM元素正在动画，一个CSS“阻塞”JS的例子

    一般情况下CSS不会直接影响JS的程序逻辑,但是以CSS实现动画的话,这个便不太确定了,这个故事发生在与UED迁移全局样式的过程. 曾经我有一段实现弹出层隐藏动画的代码是这个样子的: if (this ...

  5. Asp.net 后台添加CSS、JS、Meta标签

    Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...

  6. django 关于html、css、js 目录位置

    项目目录: project/ ---------------init.py ---------------views.py ---------------settings.py ----------- ...

  7. CI模板加载css和js

    1.需求 ci无法加载css和js文件. 2.解决 删除..htaccess文件. 在config目录下配置base_url,并传给页面 $base_url = $this->config-&g ...

  8. HTML、CSS、JS对unicode字符的不同处理

    unicode字符的不同表示法 unicode字符在html.css和js中的表示方法均不相同,下面分别作介绍. 原文发表于这里 css表示法 首先来一段很常见的bootstrap的字体图标代码: . ...

  9. 关于webStrom-11.1配置less且自动生成.css和自动压缩为.min.css/.min.js

    网上看过很多配置思路,自己总结了以下, 就把我个人配置的顺序以及材料分享下,webstrom以下简称WB 1.配置less需要安装nodejs,自行安装.因为要用到npm.我是直接把npm解压到C盘根 ...

随机推荐

  1. R-forestplot包| HR结果绘制森林图

    本文首发于“生信补给站”微信公众号,https://mp.weixin.qq.com/s/2W1W-8JKTM4S4nml3VF51w 更多关于R语言,ggplot2绘图,生信分析的内容,敬请关注小号 ...

  2. 02-11 RANSAC算法线性回归(波斯顿房价预测)

    目录 RANSAC算法线性回归(波斯顿房价预测) 一.RANSAC算法流程 二.导入模块 三.获取数据 四.训练模型 五.可视化 更新.更全的<机器学习>的更新网站,更有python.go ...

  3. 多线程EventWaitHandle -戈多编程

    在.NET的System.Threading命名空间中有一个名叫WaitHandler的类,这是一个抽象类(abstract),我们无法手动去创建它,但是WaitHandler有三个子类,这三个子类分 ...

  4. C++简单程序设计

    计算机的最基本功能是数据处理 l  C++支持的基本数据类型: n  整数.实数.字符.布尔数据 l  C++支持的基本运算 n  算术运算.关系运算.逻辑运算.位运算.逗号运算.条件运算 程序要能够 ...

  5. Vue-CLI 项目中相关操作

    0830总结 Vue-CLI 项目中相关操作 一.前台路由的基本工作流程 目录结构 |vue-proj | |src | | |components | | | |Nav.vue | | |views ...

  6. main(argc, char *argv[])

    #include<stdio.h> int main(int argc, char *argv[]) { int i; ;i<argc;i++) { printf("arg ...

  7. Unity3D 通过JSON查询天气

    一.天气查询API 获取天气信息,首先要找到提供天气数据的接口,我使用的是高德地图免费为我们提供的,网址为 https://lbs.amap.com/api/webservice/guide/api/ ...

  8. php架构师都要会什么

    架构师的成长离不开踩坑,不断试验各种方案,各种踩坑,从小坑到大坑,逐渐归纳.另外就是多学习多交流,兼收并蓄,不用特别在意细节,观其大略,了解常见的各种东西的核心价值与短板所在.一个程序和计算系统软件体 ...

  9. PHP代码审计基础-中级篇

    初级篇更多是对那些已有的版本漏洞分析,存在安全问题的函数进行讲解,中级篇更多是针对用户输入对漏洞进行利用 中级篇更多是考虑由用户输入导致的安全问题. 预备工具首先要有php本地环境可以调试代码 总结就 ...

  10. 关于Linux中的 localhost 默认地址简单介绍

    大家都知道localhost指的是本机的IP地址:127.0.0.1 用于回路测试,那能不能修改localhost呢,答案肯定是可以的 打开终端--->输入: vim /etc/host  然后 ...