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. C语言I博客作业03

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-2/homework/8717 我在这个课程的目 ...

  2. Python多任务之进程

    Process多进程 进程的概念 程序是没有运行的代码,静态的: 进程是运行起来的程序,进程是一个程序运行起来之后和资源的总称: 程序只有一个,但同一份程序可以有多个进程:例如,电脑上多开QQ: 程序 ...

  3. 如何去除CFormView的Scrollbar

    第一种方法: 重载 OnSize(UINT nType, int cx, int cy) 在CFormView::OnSize(nType, cx, cy)下面添加一句 ShowScrollBar(S ...

  4. python编程基础之三十六

    文件处理:文件处理包括读文件,写文件 读文件: 1.打开文件 2.读取文件 3.关闭文件 写文件: 1.打开文件 2.写如文件 3.关闭文件 无论是读取文件还是写文件都时需要打开文件,和关闭文件 打开 ...

  5. .NET LINQ分析AWS ELB日志避免996

    前言 小明是个单纯的.NET开发,一天大哥叫住他,安排了一项任务: "小明,分析一下我们超牛逼网站上个月的所有AWS ELB流量日志,这些日志保存在AWS S3上,你分析下,看哪个API的响 ...

  6. 决策树算法系列之一 ID3

    1 什么是决策树 通俗来说,决策树分类的思想类似于找对象 一个女孩的母亲要给这个女孩介绍男朋友 (分类问题.见或不见) 女孩有自己的一套标准 长相 收入 职业 见面与否 丑 高 某箭队经理 不见 中等 ...

  7. linux系统下使用宝塔面板安装owncloud常见问题

    在安装owncloud时出现 无法写入“config”目录! 解决方法 在宝塔面板,找到owncloud根目录,点击"权限“设置权限 将权限设置为777,应用到子目录打勾(如下图) 确定后再 ...

  8. Z－buffer算法

    1.Z缓冲区(Z-Buffer)算法 1973年,犹他大学学生艾德·卡姆尔(Edwin Catmull)独 立开发出了能跟踪屏幕上每个像素深度的算法 Z-buffer Z-buffer让计算机生成复杂 ...

  9. DJango错误日志生成

    DJango错误日志生成 setting.py设置 LOGGING = { 'version': 1, 'disable_existing_loggers': False, 'formatters': ...

  10. SpringBoot系列教程web篇之过滤器Filter使用指南扩展篇

    前面一篇博文介绍了在 SpringBoot 中使用 Filter 的两种使用方式,这里介绍另外一种直接将 Filter 当做 Spring 的 Bean 来使用的方式,并且在这种使用方式下,Filte ...