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. [Swoole] 在Ubuntu下安装、快速开始

    本文主要讲述在 Ubuntu 下编译安装 Swoole,并根据官方文档给出的demo进行了测试和搬运,包括:TCP服务器.UDP服务器.HTTP服务器.WebSocket服务器.异步客户端.定时器和协 ...

  2. IntelliJ IDEA使用JUnit单元测试

    转载:https://www.cnblogs.com/huaxingtianxia/p/5563111.html 前言 单元测试的基本使用 一.环境配置 使用idea IDE 进行单元测试,首先需要安 ...

  3. 深度长文回顾web基础组件

    什么是Serlvet ? 全称 server applet 运行在服务端的小程序: 首先来说,这个servlet是java语言编写的出来的应用程序,换句话说servlet拥有java语言全部的优点,比 ...

  4. Jenkins邮件收发（qq邮箱）

    首先确认QQ邮箱SMTP服务器的地址和端口号.如下图所示,请谨记,JENKINS全局邮箱配置需要使用: 步骤1:开启QQ邮箱的smtp服务:登陆QQ邮箱-设置-账户-开启POP3/SMTP服务-完成“ ...

  5. PHP 插入排序 -- 希尔排序

    1.希尔排序 -- Shell Insertion Sort 时间复杂度:数学家正在勤劳的探索! 适用条件: 直接插入排序的改进,主要针对移动次数的减少,这取决于"增量队列"的取值 ...

  6. ARM64架构下，OpenJDK的官方Docker镜像为何没有8版本

    为什么需要ARM64架构的OpenJDK8的Docker镜像 对现有的Java应用,之前一直运行在x86处理器环境下,编译和运行都是JDK8,如今在树莓派的Docker环境运行(也可能是其他ARM环境 ...

  7. [CF431C]k-Tree

    题目描述 Quite recently a creative student Lesha had a lecture on trees. After the lecture Lesha was ins ...

  8. std::lock_guard 与 std::unique_lock

    std::lock_guard 与 std::unique_lock 对 mutex 进行自动加解锁. mutex m; void fun() { unique_lock<mutex> m ...

  9. 《Java并发编程实战》读书笔记-第3章 对象的共享

    可见性 在没有同步的情况下,编译器.处理器以及运行时都可能做指令重排.执行结果可能会出现错误 volatile变量 编译器与运行时不会进行指令重排,不会进行缓存,使用volatile变量要满足以下条件 ...

  10. spring boot 中的路径映射

    在spring boot中集成thymeleaf后,我们知道thymeleaf的默认的html的路径为classpath:/templates也就是resources/templates,那如何访问这 ...