侧边导航栏代码css,【源码分享】jquery+css实现侧边导航栏
（⽰例代码）
1
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 }
htmlborder
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 然后通过修改主轴的元素排列⽅式让他们居中*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。