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+pjax简单示例汇总
Apr 21 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery实现穿梭框效果
Jan 19 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
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
mayfish 数据入库验证代码
2010/04/30 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
培训心得体会
2013/12/29 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
公开承诺书格式
2014/05/21 职场文书
自我管理的活动方案
2014/08/25 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android