- 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>/
来源: http://www.cnblogs.com/zheshiyigemanong/p/6986767.html