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

1、效果图 　　

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

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

这里是个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  # css侧边导航栏  # jquery侧边导航栏  # jquery导航栏  # 简单的jquery左侧导航栏和页面选中效果  # JQuery 浮动导航栏实现代码  # 用jquery的方法制作一个简单的导航栏  # Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例  # jQuery实现导航栏头部菜单项点击后变换颜色的方法  # jquery实现鼠标点击后展开列表内容的导航栏效果  # jQuery Mobile 导航栏代码  # jQuery点击导航栏选中更换样式的实现代码  # jquery实现垂直和水平菜单导航栏  # jQuery实现带展开动画的导航栏效果  # 滚动条  # 所处  # 样式表  # 这是  # 导航条  # 有什么  # 几个  # 是个  # 不太  # 说了  # 不多  # 感兴趣  # 很简单  # 工作经验  # 找了  # 让它  # 就将  # 多说  # 就到  # 首页 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 怎样使用JSON进行数据交换_它有什么限制  如何自定义safari浏览器工具栏？个性化设置safari浏览器界面教程【技巧】  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  制作电商网页,电商供应链怎么做？  海南网站制作公司有哪些,海口网是哪家的？  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】  laravel服务容器和依赖注入怎么理解_laravel服务容器与依赖注入解析  Laravel如何实现API资源集合？（Resource Collection教程）  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  BootStrap整体框架之基础布局组件  网站制作公司哪里好做,成都网站制作公司哪家做得比较好，更正规？  Laravel队列由Redis驱动怎么配置_Laravel Redis队列使用教程  Laravel如何集成Inertia.js与Vue/React？（安装配置）  Laravel如何实现用户角色和权限系统_Laravel角色权限管理机制  油猴 教程,油猴搜脚本为什么会网页无法显示？  动图在线制作网站有哪些,滑动动图图集怎么做？  Thinkphp 中 distinct 的用法解析  Laravel如何创建和注册中间件_Laravel中间件编写与应用流程  如何自定义建站之星模板颜色并下载新样式？  佐糖AI抠图怎样调整抠图精度_佐糖AI精度调整与放大细化操作【攻略】  高性价比服务器租赁——企业级配置与24小时运维服务  Android使用GridView实现日历的简单功能  Laravel怎么实现模型属性转换Casting_Laravel自动将JSON字段转为数组【技巧】  Laravel Blade组件怎么用_Laravel可复用视图组件的创建与使用  linux top下的 minerd 木马清除方法  小米17系列还有一款新机？主打6.9英寸大直屏和旗舰级影像  浅谈Javascript中的Label语句  Laravel如何使用Eloquent进行子查询  Laravel怎么导出Excel文件_Laravel Excel插件使用教程  WEB开发之注册页面验证码倒计时代码的实现  Laravel如何理解并使用服务容器（Service Container）_Laravel依赖注入与容器绑定说明  如何用好域名打造高点击率的自主建站？  JS碰撞运动实现方法详解  EditPlus中的正则表达式实战(5)  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？  Laravel如何实现事件和监听器？（Event & Listener实战）  如何快速登录WAP自助建站平台？  如何获取PHP WAP自助建站系统源码？  Laravel项目怎么部署到Linux_Laravel Nginx配置详解  如何在 React 中条件性地遍历数组并渲染元素  如何生成腾讯云建站专用兑换码？  jQuery中的100个技巧汇总  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】  百度输入法ai组件怎么删除 百度输入法ai组件移除工具  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted