【源码分享】jquery+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>