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. springmvc处理局部异常和全局异常

    springmvc通过HandlerExceptionResolver(是一个接口,在spring-webmvc依赖下)处理程序异常,包括处理器异常.数据绑定异常以及处理器执行时发生的异常.Handl ...

  2. python编程基础之十一

    循环语句:周而复始,在满足某个条件下,重复做相同或类型的事情, 循环语句三要素:循环条件 + 循环体 + 循环条件改变while 条件 : 循环体 循环条件改变... while 条件 : 循环体 循 ...

  3. layui navTree 动态渲染菜单组件介绍

    navTree.js 简介 extends/navTree.js 是一个基于 layui 扩展的模块化组件,用于构建后台布局系统中的垂直导航菜单与水平导航菜单. extends/navTree.js ...

  4. Java编程思想——第17章 容器深入研究 读书笔记（一）

    这一章将学习散列机制是如何工作的,以及在使用散列容器时怎么样编写hashCode()和equals()方法. 一.容器分类 先上两张图 来概况完整的容器分类 再细说都为什么会有那些特性. 二.填充容器 ...

  5. node.js当中的http模块与url模块的简单介绍

    一.http模块的简单介绍 node.js当中的http内置模块可以用于创建http服务器与http客户端. 1.引包 const http = require('http'); 2.创建http服务 ...

  6. 关于seaJs合并压缩（gulp-seajs-combine ）路径与文件ID匹配问题。

    前段时间和有大家介绍过用 gulp-seajs-combine 来打包seaJs文件.大家会发现合并seaJs一个很奇怪的现象,那就是它的 ID和路径匹配原则.使得有些文件已经合并过去了,但还是会提示 ...

  7. ArraryList源码解读

    先由一道题引发思考: ArrayList list = new ArrayList(20);中的list扩充几次() A 0     B 1     C 2      D 3 答案:A 直接翻看 jd ...

  8. opencv::轮廓周围绘制矩形框和圆形框

    基于RDP算法实现,目的是减少多边形轮廓点数 approxPolyDP(InputArray curve, OutputArray approxCurve, double epsilon, bool ...

  9. opencv::Sobel算子

    卷积应用-图像边缘提取 卷积应用-图像边缘提取 边缘是什么 – 是像素值发生跃迁的地方,是图像的显著特征之一, 在图像特征提取.对象检测.模式识别等方面都有重要的作用. 如何捕捉/提取边缘 – 对图像 ...

  10. 详解Java Web项目启动执行顺序

    一. web.xml加载过程(步骤): 启动web项目,容器(如Tomcat.Apache)会去读取它的配置文件web.xml 中的两个节点,context-param和listener. 紧接着,容 ...