jquery+css实现侧边导航栏效果


Posted in jQuery onJune 12, 2017

最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期。与其修改别人的代码,不如自己来写一个了。废话不多说先上图,感兴趣的请继续看下去。

1、效果图   

jquery+css实现侧边导航栏效果

当有顶部导航栏的时候侧边导航栏会消失。

jquery+css实现侧边导航栏效果

响应式方面,同样的顶部导航栏消失后右下角的图标才出现。点击出现导航,选中后消失;

这里是个demo ,没有做平滑滚动,需要的可以自己加上。

大体就介绍这么多吧,下面上代码。

2、css代码

这里是css代码,详情请看注释

<style>

  /*重置一些样式*/
  *, *::after, *::before {
   box-sizing: border-box;
   /*padding: 0;*/
   margin: 0;
   font-size: 14px;
  }
  .cd-vertical-nav ul{
   list-style: none;
  }
  a {
   color: #c0a672;
   text-decoration: none;
  }

  .nav{
   height: 80px;
  }

  .cd-image-replace {
   /* 小屏显示的图标 */
   display: inline-block;
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
   color: transparent;
  }

  /* --------------------------------

  小屏时的图标样式,和小图标响应式的显示与隐藏

  -------------------------------- */
  .cd-nav-trigger {
   display: block;
   position: fixed;
   z-index: 2;
   bottom: 30px;
   right: 5%;
   height: 44px;
   width: 44px;
   border-radius: 0.25em;
   background: rgba(9, 150,90, 0.9);
   /* reset button style */
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
   -o-appearance: none;
   appearance: none;
   border: none;
   outline: none;
  }
  .cd-nav-trigger span {
   position: absolute;
   height: 4px;
   width: 4px;
   background-color: #3a2c41;
   border-radius: 50%;
   left: 50%;
   top: 50%;
   bottom: auto;
   right: auto;
   transform: translateX(-50%) translateY(-50%);
  }
  .cd-nav-trigger span::before, .cd-nav-trigger span::after {
   content: '';
   position: absolute;
   left: 0;
   height: 100%;
   width: 100%;
   background-color: #3a2c41;
   border-radius: inherit;
  }
  .cd-nav-trigger span::before {
   top: -9px;
  }
  .cd-nav-trigger span::after {
   bottom: -9px;
  }

  @media only screen and (min-width: 768px) {
   .cd-nav-trigger {
    display: none;
   }
  }

  /* --------------------------------

  导航条的背景等属性

  -------------------------------- */
  /*移动优先原则 这里是小屏时的导航*/
  .cd-vertical-nav {
   position: fixed;
   z-index: 1;
   right: 5%;
   bottom: 30px;
   width: 90%;
   max-width: 400px;
   max-height: 90%;
   overflow-y: auto;
   transform: scale(0);
   transform-origin: right bottom;
   transition: transform 0.2s;
   border-radius: 0.25em;
   background-color: rgba(9, 9, 9, 0.9);
  }
  .cd-vertical-nav li{
   height:auto;
  }
  .cd-vertical-nav a {
   display: block;
   padding: 1em;
   color: #3a2c41;
   font-weight: bold;
   border-bottom: 1px solid rgba(58, 44, 65, 0.1);
  }
  .cd-vertical-nav a.active {
   color: #c0a672;
  }
  .cd-vertical-nav.open {
   transform: scale(1);
   z-index: 10;
   -webkit-overflow-scrolling: touch;
  }
  .cd-vertical-nav.open + .cd-nav-trigger {
   background-color: transparent;
  }
  .cd-vertical-nav.open + .cd-nav-trigger span {
   background-color: rgba(58, 44, 65, 0);
  }
  .cd-vertical-nav.open + .cd-nav-trigger span::before, .cd-vertical-nav.open + .cd-nav-trigger span::after {
   /* 给点击后的按钮做叉号(×)样式 */
   height: 3px;
   width: 20px;
   border-radius: 0;
   left: -8px;
  }
  .cd-vertical-nav.open + .cd-nav-trigger span::before {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
   top: 1px;
  }
  .cd-vertical-nav.open + .cd-nav-trigger span::after {
   -webkit-transform: rotate(135deg);
   -moz-transform: rotate(135deg);
   -ms-transform: rotate(135deg);
   -o-transform: rotate(135deg);
   transform: rotate(135deg);
   bottom: 0;
  }
  @media only screen and (min-width: 768px) {
   .cd-vertical-nav {
    /* pc端展示的效果,首先重置一下样式 */
    right: 0;
    top: 0;
    bottom: auto;
    text-align: center;

    /*这里的vh是相对可视屏幕的高度,100vh表示高度始终等于浏览器可是高度*/
    height: 100vh;
    width: 90px;
    max-width: none;
    max-height: none;
    transform: scale(1);
    background-color: transparent;
    overflow: hidden;
    /* 下面通过flex弹性盒子,让内容的主轴线编程垂直的。
    然后通过修改主轴的元素排列方式让他们居中*/
    display: flex;
    flex-direction: column;
    justify-content: center;
   }

   /*下面通过调节内容的缩放比和padding,margin等属性来调节个选项间的距离,实现动画效果*/
   .cd-vertical-nav::before {
    /* 背景色 */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    transform: translateX(100%);
    transition: transform 0.4s;
   }

   .cd-vertical-nav:hover::before {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
   }

   .cd-vertical-nav ul {
    vertical-align: middle;
    text-align: center;
    padding-left: 15px;
   }

   .cd-vertical-nav a {
    position: relative;
    padding: 0.5em 0 0;
    margin:0 auto;
    border-bottom: none;
    font-size: 1.2rem;
    color: #eaf2e3;
    transition: all .5s;
   }

   .cd-vertical-nav a.active i{
    background-color: #00a58c;
    color: #ffffff;
   }
   .cd-vertical-nav a.active span{
    color: #00a58c;
   }
   .cd-vertical-nav a.active::before, .cd-vertical-nav a:hover::before {
    background-color: #c0a672;
   }
   .cd-vertical-nav .label {
    display: block;
    opacity: 0;
    transform: translateX(150%);
    height: 0;
    transition: all 0.5s;
   }

   .cd-vertical-nav:hover .label {
    height:auto;
    opacity: 1;
    transform: translateX(0);
    padding-top: 5px;
   }
   .cd-vertical-nav:hover a {
    padding: 1em 0 0;
    margin-top: 0.8em;
    margin-right: 15px;
   }
   .cd-vertical-nav i{
    display: inline-block;
    width: 32px;
    height: 32px;
    font-size: 18px;
    line-height: 30px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: #0a9dc7;
    background-color: #fff;
    transform: scale(0.3);
    transition: all 0.3s;
   }
   .cd-vertical-nav:hover i{
    transform: scale(1);
   }

  }
  /*配合页面css*/
  section{
   height: 100vh;
  }
  section:nth-of-type(2n){
   background-color: #ff0000;
  }
  section:nth-of-type(2n+1){
   background-color: #ffff00;
  }
 </style>

3、html代码

   

这里是html代码,很简单没什么好说的。

<div class="nav">这是顶部的导航</div>

<nav class="cd-vertical-nav navbar collapse">
 <ul>
  <li><a data-scroll href="#tab1" class="active"><i class="iconfont icon-shouyeshouye"></i><span class="label">首页</span></a></li>
  <li><a data-scroll href="#tab2"><i class="iconfont icon-guanyu"></i><span class="label">关于</span></a></li>
  <li><a data-scroll href="#tab3"><i class="iconfont icon-jineng"></i><span class="label">技能</span></a></li>
  <li><a data-scroll href="#tab4"><i class="iconfont icon-gongzuojingyan"></i><span class="label">工作经验</span></a></li>
 </ul>
</nav>
<button class="cd-nav-trigger cd-image-replace">Open navigation<span aria-hidden="true"></span></button>

<section id="tab1"></section>
<section id="tab2"></section>
<section id="tab3"></section>
<section id="tab4"></section>

4、js代码   

下面我们看下js代码。注释很详细,就不多说了。

<script src="js/jquery-1.10.2.min.js"></script><!--导入jquery库-->
<script>
 $(function(){
  var a =$("section"); //获取每个大块的元素
  var b = [];
  for (i=0;i< a.length;i++){
   b[i]=a[i].offsetTop; //把每个大块距离页面最顶部的距离,赋给b数组
  }
  var c = $(window).scrollTop();//页面刷新是获取滚动条的位置
  if(c>=80){     //顶部导航栏高80;顶部导航消失的时候让侧边导航出来
   $(".cd-vertical-nav").show();
   if(window.innerWidth<768){  //小屏的情况下让按钮隐藏/出现
    $(".cd-nav-trigger").show();}
  }else {      //否则让它隐藏
   $(".cd-vertical-nav").hide();
   if(window.innerWidth<768) {
    $(".cd-nav-trigger").hide();
   }
  }

  $(window).scroll(function(){  //监听滚动条的滚动事件
   c = $(window).scrollTop();  //实时监听滚动条位置
   if(c>=80){      //页面滚动时,判断滚动条位置,控制侧边导航的隐显
    $(".cd-vertical-nav").show();
    if(window.innerWidth<768){
     $(".cd-nav-trigger").show();}
   }else {

    $(".cd-vertical-nav").hide();
    $(".cd-nav-trigger").hide();
   }

   //下面是判断页面所处位置,实时更新导航条,是导航栏选项跟页面同步
   for (i=0;i< a.length;i++){
    var d =c-b[i]; //c是滚动条位置,b是元素到页面顶部的距离,d表示当前浏览器顶部所处的位置。
    var e = a[i].offsetHeight; //获取元素的高度
    var f = a[i].id;   //获取元素的id
    var g = $(".cd-vertical-nav a[href='#"+f+"']"); //拼接字符串,通过属性选择器找到当前所处页面对应的超链接
    if (d>=0&&d<e){
     if(g.hasClass("active")){  //如果当前元素本就处于激活状态直接break
      break;
     }

     //如果当前页面没有处于激活状态,就将正在激活的移出激活的样式表
     $(".cd-vertical-nav .active").removeClass("active");
     g.addClass("active"); //给当前需要激活的属性添加激活样式表
     break;
    }
   }
  });
 })

 //下面为小屏时通过点击按钮开关导航栏,
 $(".cd-nav-trigger").on("click",function(){
  //处于open状态,就关闭
  if($(".cd-vertical-nav").hasClass("open")) $(".cd-vertical-nav").removeClass("open");
  //反之打开
  else $(".cd-vertical-nav").addClass("open");
 })
 //选中导航某一项后,关闭导航栏
 $(".cd-vertical-nav a").on("click",function(){
  $(".cd-vertical-nav").removeClass("open");

 })
</script>

今天的分享就到这里了,大家有什么意见尽管提,希望能对大家有所帮助。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 #jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 #jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 #jQuery
jquery与js实现全选功能的区别
Jun 11 #jQuery
jQuery 表单序列化实例代码
Jun 11 #jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 #jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 #jQuery
You might like
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
php防止sql注入代码实例
2013/12/18 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
php给数组赋值的实例方法
2019/09/26 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
Python 面试中 8 个必考问题
2018/11/16 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
cf收人广告词大全
2014/03/14 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
市场部岗位职责范本
2015/04/15 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python