【源碼分享】jquery+css實現側邊導航欄

時間 2019-11-13

標籤源碼分享 jquery+css jquery css 實現側邊導航欄目 JQuery 简体版

原文原文鏈接

jquery+css實現側邊導航欄css

　　　　最近作項目的時候，忽然想用一個側邊導航欄，網上找了幾個插件，有的太醜並且不太符合個人預期。與其修改別人的代碼，不如本身來寫一個了。廢話很少說先上圖，感興趣的請繼續看下去。html

1效果圖　　jquery

當有頂部導航欄的時候側邊導航欄會消失。web

　　響應式方面，一樣的頂部導航欄消失後右下角的圖標纔出現。點擊出現導航，選中後消失；編程

　　這裏是個demo ，沒有作平滑滾動，須要的能夠本身加上。數組

　　大致就介紹這麼多吧，下面上代碼。瀏覽器

2css代碼app

　　　　這裏是css代碼，詳情請看註釋ide

  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代碼　　flex

　　　　這裏是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>