jquery+css实现侧边导航栏
最近做项目的时候，突然想用一个侧边导航栏，网上找了几个插件，有的太丑而且不太符合我的预期。与其修改别人的代码，不如自己来写一个了。废话不多说先上图，感兴趣的请继续看下去。
1效果图
当有顶部导航栏的时候侧边导航栏会消失。
响应式方面，同样的顶部导航栏消失后右下角的图标才出现。点击出现导航，选中后消失；
这里是个demo ，没有做平滑滚动，需要的可以自己加上。
大体就介绍这么多吧，下面上代码。
2css代码
这里是css代码，详情请看注释
1<style> 2 3 /*重置一些样式*/ 4 *, *::after, *::before {5 box-sizing: border-box; 6 /*padding: 0;*/ 7 margin: 0; 8 font-size: 14px; 9 } 10 .cd-vertical-nav ul{11 list-style: none; 12 } 13 a {14 color: #c0a672; 15 text-decoration: none; 16 } 17 18 .nav{19 height: 80px; 20 } 21 22 .cd-image-replace {23 /* 小屏显示的图标 */ 24 display: inline-block; 25 overflow: hidden; 26 text-indent: 100%; 27 white-space: nowrap; 28 color: transparent; 29 } 30 31 /* -------------------------------- 32 33 小屏时的图标样式，和小图标响应式的显示与隐藏 34 35 -------------------------------- */ 36 .cd-nav-trigger {37 display: block; 38 position: fixed; 39 z-index: 2; 40 bottom: 30px; 41 right: 5%; 42 height: 44px; 43 width: 44px; 44 border-radius: 0.25em; 45 background: rgba(9, 150,90, 0.9); 46 /* reset button style */ 47 cursor: pointer; 48 -webkit-appearance: none; 49 -moz-appearance: none; 50 -ms-appearance: none; 51 -o-appearance: none; 52 appearance: none; 53 border: none; 54 outline: none; 55 } 56 .cd-nav-trigger span {57 position: absolute; 58 height: 4px; 59 width: 4px; 60 background-color: #3a2c41; 61 border-radius: 50%; 62 left: 50%; 63 top: 50%; 64 bottom: auto; 65 right: auto; 66 transform: translateX(-50%) translateY(-50%); 67 } 68 .cd-nav-trigger span::before, .cd-nav-trigger span::after {69 content: ''; 70 position: absolute; 71 left: 0; 72 height: 100%; 73 width: 100%; 74 background-color: #3a2c41; 75 border-radius: inherit; 76 } 77 .cd-nav-trigger span::before {78 top: -9px; 79 } 80 .cd-nav-trigger span::after {81 bottom: -9px; 82 } 83 84 @media only screen and (min-width: 768px) {85 .cd-nav-trigger { 86 display: none; 87 } 88 } 89 90 /* -------------------------------- 91 92 导航条的背景等属性 93 94 -------------------------------- */ 95 /*移动优先原则 这里是小屏时的导航*/ 96 .cd-vertical-nav {97 position: fixed; 98 z-index: 1; 99 right: 5%;100 bottom: 30px;101 width: 90%;102 max-width: 400px;103 max-height: 90%;104 overflow-y: auto;105 transform: scale(0);106 transform-origin: right bottom;107 transition: transform 0.2s;108 border-radius: 0.25em;109 background-color: rgba(9, 9, 9, 0.9);110 }111 .cd-vertical-nav li{112 height:auto;113 }114 .cd-vertical-nav a {115 display: block;116 padding: 1em;117 color: #3a2c41;118 font-weight: bold;119 border-bottom: 1px solid rgba(58, 44, 65, 0.1);120 }121 .cd-vertical-nav a.active {122 color: #c0a672;123 }124 .cd-vertical-nav.open {125 transform: scale(1);126 z-index: 10;127 -webkit-overflow-scrolling: touch;128 }129 .cd-vertical-nav.open + .cd-nav-trigger {130 background-color: transparent;131 }132 .cd-vertical-nav.open + .cd-nav-trigger span {133 background-color: rgba(58, 44, 65, 0);134 }135 .cd-vertical-nav.open + .cd-nav-trigger span::before, .cd-vertical-nav.open + .cd-nav-trigger span::after {136 /* 给点击后的按钮做叉号（×）样式 */137 height: 3px;138 width: 20px;139 border-radius: 0;140 left: -8px;141 }142 .cd-vertical-nav.open + .cd-nav-trigger span::before {143 -webkit-transform: rotate(45deg);144 -moz-transform: rotate(45deg);145 -ms-transform: rotate(45deg);146 -o-transform: rotate(45deg);147 transform: rotate(45deg);148 top: 1px;149 }150 .cd-vertical-nav.open + .cd-nav-trigger span::after {151 -webkit-transform: rotate(135deg);152 -moz-transform: rotate(135deg);153 -ms-transform: rotate(135deg);154 -o-transform: rotate(135deg);155 transform: rotate(135deg);156 bottom: 0;157 }158 @media only screen and (min-width: 768px) {159 .cd-vertical-nav {160 /* pc端展示的效果，首先重置一下样式 */161 right: 0;162 top: 0;163 bottom: auto;164 text-align: center;165 166 /*这里的vh是相对可视屏幕的高度，100vh表示高度始终等于浏览器可是高度*/167 height: 100vh;168 width: 90px;169 max-width: none;170 max-height: none;171 transform: scale(1);172 background-color: transparent;173 overflow: hidden;174 /* 下面通过flex弹性盒子，让内容的主轴线编程垂直的。175 然后通过修改主轴的元素排列方式让他们居中*/176 display: flex;177 flex-direction: column;178 justify-content: center;179 }180 181 /*下面通过调节内容的缩放比和padding，margin等属性来调节个选项间的距离，实现动画效果*/182 .cd-vertical-nav::before {183 /* 背景色 */184 content: '';185 position: absolute;186 top: 0;187 left: 0;188 width: 100%;189 height: 100%;190 background: rgba(0, 0, 0, 0.8);191 transform: translateX(100%);192 transition: transform 0.4s;193 }194 195 .cd-vertical-nav:hover::before {196 -webkit-transform: translateX(0);197 -moz-transform: translateX(0);198 -ms-transform: translateX(0);199 -o-transform: translateX(0);200 transform: translateX(0);201 }202 203 .cd-vertical-nav ul {204 vertical-align: middle;205 text-align: center;206 padding-left: 15px;207 }208 209 .cd-vertical-nav a {210 position: relative;211 padding: 0.5em 0 0;212 margin:0 auto;213 border-bottom: none;214 font-size: 1.2rem;215 color: #eaf2e3;216 transition: all .5s;217 }218 219 .cd-vertical-nav a.active i{220 background-color: #00a58c;221 color: #ffffff;222 }223 .cd-vertical-nav a.active span{224 color: #00a58c;225 }226 .cd-vertical-nav a.active::before, .cd-vertical-nav a:hover::before {227 background-color: #c0a672;228 }229 .cd-vertical-nav .label {230 display: block;231 opacity: 0;232 transform: translateX(150%);233 height: 0;234 transition: all 0.5s;235 }236 237 .cd-vertical-nav:hover .label {238 height:auto;239 opacity: 1;240 transform: translateX(0);241 padding-top: 5px;242 }243 .cd-vertical-nav:hover a {244 padding: 1em 0 0;245 margin-top: 0.8em;246 margin-right: 15px;247 }248 .cd-vertical-nav i{249 display: inline-block;250 width: 32px;251 height: 32px;252 font-size: 18px;253 line-height: 30px;254 -webkit-border-radius: 50%;255 -moz-border-radius: 50%;256 border-radius: 50%;257 color: #0a9dc7;258 background-color: #fff;259 transform: scale(0.3);260 transition: all 0.3s;261 }262 .cd-vertical-nav:hover i{263 transform: scale(1);264 }265 266 }267 /*配合页面css*/268 section{269 height: 100vh;270 }271 section:nth-of-type(2n){272 background-color: #ff0000;273 }274 section:nth-of-type(2n+1){275 background-color: #ffff00;276 }277</style>
3html代码
这里是html代码，很简单没什么好说的。
1 <div class="nav">这是顶部的导航</div> 2 3 <nav class="cd-vertical-nav navbar collapse"> 4<ul> 5 <li><a data-scroll href="#tab1" class="active"><i class="iconfont icon-shouyeshouye"></i><span class="label">首页</span></a></li> 6 <li><a data-scroll href="#tab2"><i class="iconfont icon-guanyu"></i><span class="label">关于</span></a></li> 7 <li><a data-scroll href="#tab3"><i class="iconfont icon-jineng"></i><span class="label">技能</span></a></li> 8 <li><a data-scroll href="#tab4"><i class="iconfont icon-gongzuojingyan"></i><span class="label">工作经验</span></a></li> 9</ul>10 </nav>11 <button class="cd-nav-trigger cd-image-replace">Open navigation<span aria-hidden="true"></span></button>12 13 <section id="tab1"></section>14 <section id="tab2"></section>15 <section id="tab3"></section>16 <section id="tab4"></section>
4js代码
下面我们看下js代码。注释很详细，就不多说了。
1 <script src="js/jquery-1.10.2.min.js"></script><!--导入jquery库--> 2 <script> 3$(function(){ 4 var a =$("section"); //获取每个大块的元素 5 var b = []; 6 for (i=0;i< a.length;i++){ 7 b[i]=a[i].offsetTop; //把每个大块距离页面最顶部的距离，赋给b数组 8 } 9 var c = $(window).scrollTop();//页面刷新是获取滚动条的位置10 if(c>=80){//顶部导航栏高80；顶部导航消失的时候让侧边导航出来11 $(".cd-vertical-nav").show();12 if(window.innerWidth<768){//小屏的情况下让按钮隐藏/出现13 $(".cd-nav-trigger").show();}14 }else { //否则让它隐藏15 $(".cd-vertical-nav").hide();16 if(window.innerWidth<768) {17 $(".cd-nav-trigger").hide();18 }19 }20 21 $(window).scroll(function(){ //监听滚动条的滚动事件22 c = $(window).scrollTop();//实时监听滚动条位置23 if(c>=80){ //页面滚动时，判断滚动条位置，控制侧边导航的隐显24 $(".cd-vertical-nav").show();25 if(window.innerWidth<768){26 $(".cd-nav-trigger").show();}27 }else {28 29 $(".cd-vertical-nav").hide();30 $(".cd-nav-trigger").hide();31 }32 33 //下面是判断页面所处位置，实时更新导航条，是导航栏选项跟页面同步34 for (i=0;i< a.length;i++){35 var d =c-b[i]; //c是滚动条位置，b是元素到页面顶部的距离，d表示当前浏览器顶部所处的位置。36 var e = a[i].offsetHeight; //获取元素的高度37 var f = a[i].id; //获取元素的id38 var g = $(".cd-vertical-nav a[href='#"+f+"']"); //拼接字符串，通过属性选择器找到当前所处页面对应的超链接39 if (d>=0&&d<e){40 if(g.hasClass("active")){ //如果当前元素本就处于激活状态直接break41break;42 }43 44 //如果当前页面没有处于激活状态，就将正在激活的移出激活的样式表45 $(".cd-vertical-nav .active").removeClass("active");46 g.addClass("active"); //给当前需要激活的属性添加激活样式表47 break;48 }49 }50 });51})52 53//下面为小屏时通过点击按钮开关导航栏，54$(".cd-nav-trigger").on("click",function(){55 //处于open状态，就关闭56 if($(".cd-vertical-nav").hasClass("open")) $(".cd-vertical-nav").removeClass("open");57 //反之打开58 else $(".cd-vertical-nav").addClass("open");59})60//选中导航某一项后，关闭导航栏61$(".cd-vertical-nav a").on("click",function(){62 $(".cd-vertical-nav").removeClass("open");63 64})65 </script>
今天的分享就到这里了，大家有什么意见尽管提，希望能对大家有所帮助。
本次分享就到这里
谢谢大家的观看
觉得不错请点赞
希望能对大家有所启发
有更好的方法或不同的意见请在留言区跟我交流
PS：转载请注明出处！！
