【源码分享】jquery+css实现侧边导航栏
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; //获取元素的id 38 var g = $(".cd-vertical-nav a[href='#"+f+"']"); //拼接字符串，通过属性选择器找到当前所处页面对应的超链接 39 if (d>=0&&d<e){ 40 if(g.hasClass("active")){ //如果当前元素本就处于激活状态直接break 41 break; 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：转载请注明出处！！
