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. React入门学习

    为了获得更好的阅读体验,请访问原地址:传送门 一.React 简介 React 是什么 React 是一个起源于 Facebook 的内部项目,因为当时 Facebook 对于市场上所有的 JavaS ...

  2. Feign【文件上传】

    话不多说,上代码.... 项目公共依赖配置: <parent> <groupId>org.springframework.boot</groupId> <ar ...

  3. 我最推荐的一张Java后端学习路线图，Java工程师必备

    前言 学习路线图往往是学习一样技术的入门指南.网上搜到的Java学习路线图也是一抓一大把. 今天我只选一张图,仅此一图,足以包罗Java后端技术的知识点.所谓不求最好,但求最全,学习Java后端的同学 ...

  4. html隐写术，使用摩尔兹电码/莫尔兹电码存储信息 水波纹样式 Morse code

    html水波纹样式,源码直接下载,代码有注释教程,小白可以看懂. 动画啥的都做好了,效果我觉得还不错 网上文章看到xbox 工程师使用隐写术,在界面的右下角放上了含有用户激活码的水波纹样式,一般人还真 ...

  5. C# MQTT mqtt客户端，发布订阅消息

    如果想用C#来和mqtt的服务器进行数据交互的话,有一个常见的选择,那就是 MQTTNET 地址如下:https://github.com/chkr1011/MQTTnet 那个库在最近几个版本升级的 ...

  6. PHP array_slice

    1.函数的作用:返回数组中的部分区间的元素 2.函数的参数: @params  array  $array @params  int      $offset @params  int      $l ...

  7. [Luogu2824] [HEOI2016/TJOI2016]排序

    题目描述 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在他在研究一个难题,需要你来帮助他.这个难题是这样子的:给出一个1到n的全排列,现在对这个全排列序列进行 ...

  8. [LUOGU2964] [USACO09NOV]硬币的游戏A Coin Game

    题目描述 Farmer John's cows like to play coin games so FJ has invented with a new two-player coin game c ...

  9. Java系列之注解

    Java系列之注解 Java 注解(Annotation)又称之为 Java 标注.元数据,是 Java 1.5 之后加入的一种特殊语法,通过注解可以标注 Java 中的类.方法.属性.参数.包等,可 ...

  10. Spring Boot 2.X(十一)：全局异常处理

    前言 在 Java Web 系统开发中,不管是 Controller 层.Service 层还是 Dao 层,都有可能抛出异常.如果在每个方法中加上各种 try catch 的异常处理代码,那样会使代 ...