【源码分享】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:转载请注明出处!!

  

 

posted @ 2017-06-11 22:53  lms_码农  阅读(6726)  评论(7编辑  收藏  举报