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>
