首页 > 代码库 > CSS实现的几款不错的菜单栏
CSS实现的几款不错的菜单栏
前言
自从做了智慧城市这个项目之后，我一个做后端的开发者，瞬间转为前端开发，不过我还是很喜欢前端的。前端那些事，其实蛮有意思的，HTML实现的是静态的，使用ajax之后就可以和数据库交互了，加上js和jQuery之后就动起来了，加上CSS之后就更加炫酷了。因为项目中需要，查资料和编写了一些炫酷的二级菜单，分享给大家，好东西就要分享嘛！
一、滑动菜单
1、代码：
1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>纯CSS3垂直菜单 菜单项滑动动画DEMO演示</title> 6 <link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3/base.css" media="all" /> 7 <script type="text/javascript" src="http://www.w3cplus.com/demo/css3/prefixfree.min.js"></script> 8 <style> 9 body { 10 background-color:#282828; 11 } 12 .demo { 13 margin: 40px auto 0; 14 width: 170px; 15 text-align: center; 16 } 17 .menu { 18 position: relative; 19 width: 170px; 20 padding: 5px 0; 21 line-height: 35px; 22 border-radius: 5px; 23 background: -*-linear-gradient(top,#dbdbdb,#999); 24 } 25 .menu a { 26 display: block; 27 color: #484848; 28 text-decoration: none; 29 text-shadow: 0 1px 0 #e0e0e0; 30 font-size: 14px; 31 } 32 .menu li:hover a, 33 .menu li:first-child a { 34 color: #980202; 35 text-shadow: 0 1px 0 rgba(0,0,0,.1); 36 } 37 .menu li:hover a{ 38 color: #fff; 39 } 40 .menu li { 41 position: relative; 42 z-index: 2; 43 } 44 .ribbon_wrap { 45 position: absolute; 46 top: 8px; 47 left: -20px; 48 z-index: 1; 49 transition: top 0.4s; 50 } 51 .ribbon_rail { 52 position: relative; 53 width: 170px; 54 height: 30px; 55 padding: 0 20px; 56 color: #e3e3e3; 57 text-shadow: 0 1px 0 #6b6b6b; 58 box-shadow: 0 2px 5px rgba(0,0,0,.2); 59 background: -*-linear-gradient(top,#ff3f3f,#a50000); 60 } 61 .ribbon_rail:before, 62 .ribbon_rail:after { 63 position:absolute; 64 content:""; 65 top:100%; 66 width:0; 67 height:0; 68 border: 5px solid transparent; 69 } 70 .ribbon_rail:before { 71 left:0; 72 border-color: #5d0f0f #5d0f0f transparent transparent; 73 } 74 .ribbon_rail:after { 75 right:0; 76 border-color: #5d0f0f transparent transparent #5d0f0f; 77 } 78 .ribbon_rail > div { 79 width: 100%; 80 } 81 .ribbon_rail > div:before, 82 .ribbon_rail > div:after { 83 content:""; 84 position: absolute; 85 top:10px; 86 z-index: -1; 87 width: 0; 88 height:0; 89 border-width: 14px; 90 border-style: solid; 91 border-color: #ff1515 #ff1515 #920000 #ff1515; 92 } 93 .ribbon_rail > div:before { 94 right: 100%; 95 border-left-color: transparent; 96 margin-right: -10px; 97 } 98 .ribbon_rail > div:after { 99 left: 100%; 100 border-right-color: transparent; 101 margin-left: -10px; 102 } 103 .menu li:nth-child(1):hover ~ .ribbon_wrap{ 104 top: 8px; 105 } 106 .menu li:nth-child(2):hover ~ .ribbon_wrap{ 107 top: 43px; 108 } 109 .menu li:nth-child(3):hover ~ .ribbon_wrap{ 110 top: 78px; 111 } 112 .menu li:nth-child(4):hover ~ .ribbon_wrap{ 113 top: 113px; 114 } 115 .menu li:nth-child(5):hover ~ .ribbon_wrap{ 116 top: 148px; 117 } 118 </style> 119 </head> 120 <body> 121 <div class="page"> 122 <section class="demo"> 123 <ul class="menu unstyled"> 124 <li><a href="#" title=""><strong>Steve Careless</strong></a></li> 125 <li><a href="#" title=""><strong>Hank Azarena</strong></a></li> 126 <li><a href="#" title=""><strong>Joan Rivals</strong></a></li> 127 <li><a href="#" title=""><strong>Johnny Dip</strong></a></li> 128 <li><a href="#" title=""><strong>Gwyneth Patron</strong></a></li> 129 <div class="ribbon_wrap"> 130 <div class="ribbon_rail"> 131 <div></div> 132 </div> 133 </div> 134 </ul> 135 </section> 136 <div style="text-align:center;clear:both"> 137 <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> 138 <script src="/follow.js" type="text/javascript"></script> 139 </div> 140 </div> 141 </body> 142 </html>
2、效果
二、左侧带图标多级下拉菜单
1、HTML代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 6 <title>jQuery左侧带小图标的多级下拉菜单DEMO演示</title> 7 <link href="css/font-awesome.css" rel="stylesheet"> 8 <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> 9 <script type="text/javascript" src="js/google-maps.js"></script> 10 <script>$(document).ready(function(){$(".vertical-nav").verticalnav({speed: 400,align: "left"});});</script> 11 </head> 12 <body> 13 <div style="text-align:center;clear:both;"> 14 <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> 15 <script src="/follow.js" type="text/javascript"></script> 16 </div> 17 <div class="kePublic"> 18 <!--效果html开始--> 19 <div class="content"> 20 <ul class="vertical-nav dark red"> 21 <li class="active"><a href="http://www.internetke.com/"><i class="icon-home"></i>首页</a></li> 22 <li><a href="http://www.internetke.com/"><i class="icon-cogs"></i>服务 23 <span class="submenu-icon"></span></a> 24 <ul> 25 <li><a href="http://www.internetke.com/">二级导航</a></li> 26 <li><a href="http://www.internetke.com/">二级导航</a></li> 27 <li><a href="http://www.internetke.com/">二级导航</a></li> 28 <li><a href="http://www.internetke.com/">二级导航</a></li> 29 <li><a href="http://www.internetke.com/">二级导航</a></li> 30 <li><a href="http://www.internetke.com/">二级导航</a></li> 31 </ul> 32 </li> 33 <li><a href="http://www.internetke.com/"><i class="icon-briefcase"></i>产品 34 <span class="submenu-icon"></span></a> 35 <ul> 36 <li><a href="http://www.internetke.com/">二级导航</a></li> 37 <li><a href="http://www.internetke.com/">二级导航</a></li> 38 <li><a href="http://www.internetke.com/">二级导航<span class="submenu-icon"></span></a><ul> 39 <li><a href="http://www.internetke.com/">三级导航</a></li> 40 <li><a href="http://www.internetke.com/">三级导航</a></li> 41 <li><a href="http://www.internetke.com/">三级导航 <span class="submenu-icon"></span> 42 </a> 43 <ul> 44 <li><a href="http://www.internetke.com/">四级导航</a></li> 45 <li><a href="http://www.internetke.com/">四级导航</a></li> 46 <li><a href="http://www.internetke.com/">四级导航</a></li> 47 <li><a href="http://www.internetke.com/">四级导航</a></li> 48 </ul> 49 </li> 50 <li><a href="http://www.internetke.com/">三级导航</a></li> 51 </ul> 52 </li> 53 <li><a href="http://www.internetke.com/">二级导航</a></li> 54 <li><a href="http://www.internetke.com/">二级导航</a></li> 55 </ul> 56 </li> 57 <li><a href="http://www.internetke.com/"><i class="icon-user"></i>关于我们</a></li> 58 <li><a href="http://www.internetke.com/"><i class="icon-comments-alt"></i>博客</a></li> 59 <li><a href="http://www.internetke.com/"><i class="icon-picture"></i>导航</a></li> 60 <li><a href="http://www.internetke.com/"><i class="icon-info"></i>信息</a></li> 61 <li><a href="http://www.internetke.com/"><i class="icon-group"></i>团队</a></li> 62 <li><a href="http://www.internetke.com/"><i class="icon-question"></i>常见问题</a></li> 63 <li><a href="http://www.internetke.com/"><i class="icon-bar-chart"></i>案例</a></li> 64 <li><a href="http://www.internetke.com/"><i class="icon-envelope"></i>联系我们</a></li> 65 </ul> 66 </div> 67 <!--效果html结束--> 68 <div class="clear"></div> 69 </div> 70 71 </body> 72 </html>
2、CSS代码：
1 @charset "utf-8"; 2 body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none} 3 h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal} 4 div {text-align:left} 5 a img {border:0} 6 body { color: #333; text-align: center; font: 12px "宋体"; } 7 ul, ol, li {list-style-type:none;vertical-align:0} 8 .clear{height:0; overflow:hidden; clear:both} 9 10 @font-face { 11 font-family: ‘FontAwesome‘; 12 src: url(‘font/fontawesome-webfont.eot?v=3.1.0‘); 13 src: url(‘font/fontawesome-webfont.eot?#iefix&v=3.1.0‘) format(‘embedded-opentype‘), 14 url(‘font/fontawesome-webfont.woff?v=3.1.0‘) format(‘woff‘), 15 url(‘font/fontawesome-webfont.ttf?v=3.1.0‘) format(‘truetype‘), 16 url(‘font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0‘) format(‘svg‘); 17 font-weight: normal; 18 font-style: normal; 19 } 20 /* FONT AWESOME CORE 21 * -------------------------- */ 22 [class^="icon-"], 23 [class*=" icon-"] { 24 font-family: FontAwesome; 25 font-weight: normal; 26 font-style: normal; 27 text-decoration: inherit; 28 -webkit-font-smoothing: antialiased; 29 *margin-right: .3em; 30 } 31 [class^="icon-"]:before, 32 [class*=" icon-"]:before { 33 text-decoration: inherit; 34 display: inline-block; 35 speak: none; 36 } 37 /* makes the font 33% larger relative to the icon container */ 38 .icon-large:before { 39 vertical-align: -10%; 40 font-size: 1.3333333333333333em; 41 } 42 /* makes sure icons active on rollover in links */ 43 a [class^="icon-"], 44 a [class*=" icon-"], 45 a [class^="icon-"]:before, 46 a [class*=" icon-"]:before { 47 display: inline; 48 } 49 /* increased font size for icon-large */ 50 [class^="icon-"].icon-fixed-width, 51 [class*=" icon-"].icon-fixed-width { 52 display: inline-block; 53 width: 1.2857142857142858em; 54 text-align: center; 55 } 56 [class^="icon-"].icon-fixed-width.icon-large, 57 [class*=" icon-"].icon-fixed-width.icon-large { 58 width: 1.5714285714285714em; 59 } 60 ul.icons-ul { 61 list-style-type: none; 62 text-indent: -0.7142857142857143em; 63 margin-left: 2.142857142857143em; 64 } 65 ul.icons-ul > li .icon-li { 66 width: 0.7142857142857143em; 67 display: inline-block; 68 text-align: center; 69 } 70 [class^="icon-"].hide, 71 [class*=" icon-"].hide { 72 display: none; 73 } 74 .icon-muted { 75 color: #eeeeee; 76 } 77 .icon-light { 78 color: #ffffff; 79 } 80 .icon-dark { 81 color: #333333; 82 } 83 .icon-border { 84 border: solid 1px #eeeeee; 85 padding: .2em .25em .15em; 86 -webkit-border-radius: 3px; 87 -moz-border-radius: 3px; 88 border-radius: 3px; 89 } 90 .icon-2x { 91 font-size: 2em; 92 } 93 .icon-2x.icon-border { 94 border-width: 2px; 95 -webkit-border-radius: 4px; 96 -moz-border-radius: 4px; 97 border-radius: 4px; 98 } 99 .icon-3x { 100 font-size: 3em; 101 } 102 .icon-3x.icon-border { 103 border-width: 3px; 104 -webkit-border-radius: 5px; 105 -moz-border-radius: 5px; 106 border-radius: 5px; 107 } 108 .icon-4x { 109 font-size: 4em; 110 } 111 .icon-4x.icon-border { 112 border-width: 4px; 113 -webkit-border-radius: 6px; 114 -moz-border-radius: 6px; 115 border-radius: 6px; 116 } 117 .icon-5x { 118 font-size: 5em; 119 } 120 .icon-5x.icon-border { 121 border-width: 5px; 122 -webkit-border-radius: 7px; 123 -moz-border-radius: 7px; 124 border-radius: 7px; 125 } 126 .pull-right { 127 float: right; 128 } 129 .pull-left { 130 float: left; 131 } 132 [class^="icon-"].pull-left, 133 [class*=" icon-"].pull-left { 134 margin-right: .3em; 135 } 136 [class^="icon-"].pull-right, 137 [class*=" icon-"].pull-right { 138 margin-left: .3em; 139 } 140 /* BOOTSTRAP SPECIFIC CLASSES 141 * -------------------------- */ 142 /* Bootstrap 2.0 sprites.less reset */ 143 [class^="icon-"], 144 [class*=" icon-"] { 145 display: inline; 146 width: auto; 147 height: auto; 148 line-height: normal; 149 vertical-align: baseline; 150 background-image: none; 151 background-position: 0% 0%; 152 background-repeat: repeat; 153 margin-top: 0; 154 } 155 /* more sprites.less reset */ 156 .icon-white, 157 .nav-pills > .active > a > [class^="icon-"], 158 .nav-pills > .active > a > [class*=" icon-"], 159 .nav-list > .active > a > [class^="icon-"], 160 .nav-list > .active > a > [class*=" icon-"], 161 .navbar-inverse .nav > .active > a > [class^="icon-"], 162 .navbar-inverse .nav > .active > a > [class*=" icon-"], 163 .dropdown-menu > li > a:hover > [class^="icon-"], 164 .dropdown-menu > li > a:hover > [class*=" icon-"], 165 .dropdown-menu > .active > a > [class^="icon-"], 166 .dropdown-menu > .active > a > [class*=" icon-"], 167 .dropdown-submenu:hover > a > [class^="icon-"], 168 .dropdown-submenu:hover > a > [class*=" icon-"] { 169 background-image: none; 170 } 171 /* keeps Bootstrap styles with and without icons the same */ 172 .btn [class^="icon-"].icon-large, 173 .nav [class^="icon-"].icon-large, 174 .btn [class*=" icon-"].icon-large, 175 .nav [class*=" icon-"].icon-large { 176 line-height: .9em; 177 } 178 .btn [class^="icon-"].icon-spin, 179 .nav [class^="icon-"].icon-spin, 180 .btn [class*=" icon-"].icon-spin, 181 .nav [class*=" icon-"].icon-spin { 182 display: inline-block; 183 } 184 .nav-tabs [class^="icon-"], 185 .nav-pills [class^="icon-"], 186 .nav-tabs [class*=" icon-"], 187 .nav-pills [class*=" icon-"], 188 .nav-tabs [class^="icon-"].icon-large, 189 .nav-pills [class^="icon-"].icon-large, 190 .nav-tabs [class*=" icon-"].icon-large, 191 .nav-pills [class*=" icon-"].icon-large { 192 line-height: .9em; 193 } 194 .btn [class^="icon-"].pull-left.icon-2x, 195 .btn [class*=" icon-"].pull-left.icon-2x, 196 .btn [class^="icon-"].pull-right.icon-2x, 197 .btn [class*=" icon-"].pull-right.icon-2x { 198 margin-top: .18em; 199 } 200 .btn [class^="icon-"].icon-spin.icon-large, 201 .btn [class*=" icon-"].icon-spin.icon-large { 202 line-height: .8em; 203 } 204 .btn.btn-small [class^="icon-"].pull-left.icon-2x, 205 .btn.btn-small [class*=" icon-"].pull-left.icon-2x, 206 .btn.btn-small [class^="icon-"].pull-right.icon-2x, 207 .btn.btn-small [class*=" icon-"].pull-right.icon-2x { 208 margin-top: .25em; 209 } 210 .btn.btn-large [class^="icon-"], 211 .btn.btn-large [class*=" icon-"] { 212 margin-top: 0; 213 } 214 .btn.btn-large [class^="icon-"].pull-left.icon-2x, 215 .btn.btn-large [class*=" icon-"].pull-left.icon-2x, 216 .btn.btn-large [class^="icon-"].pull-right.icon-2x, 217 .btn.btn-large [class*=" icon-"].pull-right.icon-2x { 218 margin-top: .05em; 219 } 220 .btn.btn-large [class^="icon-"].pull-left.icon-2x, 221 .btn.btn-large [class*=" icon-"].pull-left.icon-2x { 222 margin-right: .2em; 223 } 224 .btn.btn-large [class^="icon-"].pull-right.icon-2x, 225 .btn.btn-large [class*=" icon-"].pull-right.icon-2x { 226 margin-left: .2em; 227 } 228 /* EXTRAS 229 * -------------------------- */ 230 /* Stacked and layered icon */ 231 .icon-stack { 232 position: relative; 233 display: inline-block; 234 width: 2em; 235 height: 2em; 236 line-height: 2em; 237 vertical-align: -35%; 238 } 239 .icon-stack [class^="icon-"], 240 .icon-stack [class*=" icon-"] { 241 display: block; 242 text-align: center; 243 position: absolute; 244 width: 100%; 245 height: 100%; 246 font-size: 1em; 247 line-height: inherit; 248 *line-height: 2em; 249 } 250 .icon-stack .icon-stack-base { 251 font-size: 2em; 252 *line-height: 1em; 253 } 254 /* Animated rotating icon */ 255 .icon-spin { 256 display: inline-block; 257 -moz-animation: spin 2s infinite linear; 258 -o-animation: spin 2s infinite linear; 259 -webkit-animation: spin 2s infinite linear; 260 animation: spin 2s infinite linear; 261 } 262 @-moz-keyframes spin { 263 0% { 264 -moz-transform: rotate(0deg); 265 } 266 100% { 267 -moz-transform: rotate(359deg); 268 } 269 } 270 @-webkit-keyframes spin { 271 0% { 272 -webkit-transform: rotate(0deg); 273 } 274 100% { 275 -webkit-transform: rotate(359deg); 276 } 277 } 278 @-o-keyframes spin { 279 0% { 280 -o-transform: rotate(0deg); 281 } 282 100% { 283 -o-transform: rotate(359deg); 284 } 285 } 286 @-ms-keyframes spin { 287 0% { 288 -ms-transform: rotate(0deg); 289 } 290 100% { 291 -ms-transform: rotate(359deg); 292 } 293 } 294 @keyframes spin { 295 0% { 296 transform: rotate(0deg); 297 } 298 100% { 299 transform: rotate(359deg); 300 } 301 } 302 /* Icon rotations and mirroring */ 303 .icon-rotate-90:before { 304 -webkit-transform: rotate(90deg); 305 -moz-transform: rotate(90deg); 306 -ms-transform: rotate(90deg); 307 -o-transform: rotate(90deg); 308 transform: rotate(90deg); 309 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 310 } 311 .icon-rotate-180:before { 312 -webkit-transform: rotate(180deg); 313 -moz-transform: rotate(180deg); 314 -ms-transform: rotate(180deg); 315 -o-transform: rotate(180deg); 316 transform: rotate(180deg); 317 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 318 } 319 .icon-rotate-270:before { 320 -webkit-transform: rotate(270deg); 321 -moz-transform: rotate(270deg); 322 -ms-transform: rotate(270deg); 323 -o-transform: rotate(270deg); 324 transform: rotate(270deg); 325 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 326 } 327 .icon-flip-horizontal:before { 328 -webkit-transform: scale(-1, 1); 329 -moz-transform: scale(-1, 1); 330 -ms-transform: scale(-1, 1); 331 -o-transform: scale(-1, 1); 332 transform: scale(-1, 1); 333 } 334 .icon-flip-vertical:before { 335 -webkit-transform: scale(1, -1); 336 -moz-transform: scale(1, -1); 337 -ms-transform: scale(1, -1); 338 -o-transform: scale(1, -1); 339 transform: scale(1, -1); 340 } 341 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen 342 readers do not read off random characters that represent icons */ 343 .icon-glass:before { 344 content: "\f000"; 345 } 346 .icon-music:before { 347 content: "\f001"; 348 } 349 .icon-search:before { 350 content: "\f002"; 351 } 352 .icon-envelope:before { 353 content: "\f003"; 354 } 355 .icon-heart:before { 356 content: "\f004"; 357 } 358 .icon-star:before { 359 content: "\f005"; 360 } 361 .icon-star-empty:before { 362 content: "\f006"; 363 } 364 .icon-user:before { 365 content: "\f007"; 366 } 367 .icon-film:before { 368 content: "\f008"; 369 } 370 .icon-th-large:before { 371 content: "\f009"; 372 } 373 .icon-th:before { 374 content: "\f00a"; 375 } 376 .icon-th-list:before { 377 content: "\f00b"; 378 } 379 .icon-ok:before { 380 content: "\f00c"; 381 } 382 .icon-remove:before { 383 content: "\f00d"; 384 } 385 .icon-zoom-in:before { 386 content: "\f00e"; 387 } 388 .icon-zoom-out:before { 389 content: "\f010"; 390 } 391 .icon-off:before { 392 content: "\f011"; 393 } 394 .icon-signal:before { 395 content: "\f012"; 396 } 397 .icon-cog:before { 398 content: "\f013"; 399 } 400 .icon-trash:before { 401 content: "\f014"; 402 } 403 .icon-home:before { 404 content: "\f015"; 405 } 406 .icon-file:before { 407 content: "\f016"; 408 } 409 .icon-time:before { 410 content: "\f017"; 411 } 412 .icon-road:before { 413 content: "\f018"; 414 } 415 .icon-download-alt:before { 416 content: "\f019"; 417 } 418 .icon-download:before { 419 content: "\f01a"; 420 } 421 .icon-upload:before { 422 content: "\f01b"; 423 } 424 .icon-inbox:before { 425 content: "\f01c"; 426 } 427 .icon-play-circle:before { 428 content: "\f01d"; 429 } 430 .icon-repeat:before, 431 .icon-rotate-right:before { 432 content: "\f01e"; 433 } 434 /* F020 doesn‘t work in Safari. all shifted one down */ 435 .icon-refresh:before { 436 content: "\f021"; 437 } 438 .icon-list-alt:before { 439 content: "\f022"; 440 } 441 .icon-lock:before { 442 content: "\f023"; 443 } 444 .icon-flag:before { 445 content: "\f024"; 446 } 447 .icon-headphones:before { 448 content: "\f025"; 449 } 450 .icon-volume-off:before { 451 content: "\f026"; 452 } 453 .icon-volume-down:before { 454 content: "\f027"; 455 } 456 .icon-volume-up:before { 457 content: "\f028"; 458 } 459 .icon-qrcode:before { 460 content: "\f029"; 461 } 462 .icon-barcode:before { 463 content: "\f02a"; 464 } 465 .icon-tag:before { 466 content: "\f02b"; 467 } 468 .icon-tags:before { 469 content: "\f02c"; 470 } 471 .icon-book:before { 472 content: "\f02d"; 473 } 474 .icon-bookmark:before { 475 content: "\f02e"; 476 } 477 .icon-print:before { 478 content: "\f02f"; 479 } 480 .icon-camera:before { 481 content: "\f030"; 482 } 483 .icon-font:before { 484 content: "\f031"; 485 } 486 .icon-bold:before { 487 content: "\f032"; 488 } 489 .icon-italic:before { 490 content: "\f033"; 491 } 492 .icon-text-height:before { 493 content: "\f034"; 494 } 495 .icon-text-width:before { 496 content: "\f035"; 497 } 498 .icon-align-left:before { 499 content: "\f036"; 500 } 501 .icon-align-center:before { 502 content: "\f037"; 503 } 504 .icon-align-right:before { 505 content: "\f038"; 506 } 507 .icon-align-justify:before { 508 content: "\f039"; 509 } 510 .icon-list:before { 511 content: "\f03a"; 512 } 513 .icon-indent-left:before { 514 content: "\f03b"; 515 } 516 .icon-indent-right:before { 517 content: "\f03c"; 518 } 519 .icon-facetime-video:before { 520 content: "\f03d"; 521 } 522 .icon-picture:before { 523 content: "\f03e"; 524 } 525 .icon-pencil:before { 526 content: "\f040"; 527 } 528 .icon-map-marker:before { 529 content: "\f041"; 530 } 531 .icon-adjust:before { 532 content: "\f042"; 533 } 534 .icon-tint:before { 535 content: "\f043"; 536 } 537 .icon-edit:before { 538 content: "\f044"; 539 } 540 .icon-share:before { 541 content: "\f045"; 542 } 543 .icon-check:before { 544 content: "\f046"; 545 } 546 .icon-move:before { 547 content: "\f047"; 548 } 549 .icon-step-backward:before { 550 content: "\f048"; 551 } 552 .icon-fast-backward:before { 553 content: "\f049"; 554 } 555 .icon-backward:before { 556 content: "\f04a"; 557 } 558 .icon-play:before { 559 content: "\f04b"; 560 } 561 .icon-pause:before { 562 content: "\f04c"; 563 } 564 .icon-stop:before { 565 content: "\f04d"; 566 } 567 .icon-forward:before { 568 content: "\f04e"; 569 } 570 .icon-fast-forward:before { 571 content: "\f050"; 572 } 573 .icon-step-forward:before { 574 content: "\f051"; 575 } 576 .icon-eject:before { 577 content: "\f052"; 578 } 579 .icon-chevron-left:before { 580 content: "\f053"; 581 } 582 .icon-chevron-right:before { 583 content: "\f054"; 584 } 585 .icon-plus-sign:before { 586 content: "\f055"; 587 } 588 .icon-minus-sign:before { 589 content: "\f056"; 590 } 591 .icon-remove-sign:before { 592 content: "\f057"; 593 } 594 .icon-ok-sign:before { 595 content: "\f058"; 596 } 597 .icon-question-sign:before { 598 content: "\f059"; 599 } 600 .icon-info-sign:before { 601 content: "\f05a"; 602 } 603 .icon-screenshot:before { 604 content: "\f05b"; 605 } 606 .icon-remove-circle:before { 607 content: "\f05c"; 608 } 609 .icon-ok-circle:before { 610 content: "\f05d"; 611 } 612 .icon-ban-circle:before { 613 content: "\f05e"; 614 } 615 .icon-arrow-left:before { 616 content: "\f060"; 617 } 618 .icon-arrow-right:before { 619 content: "\f061"; 620 } 621 .icon-arrow-up:before { 622 content: "\f062"; 623 } 624 .icon-arrow-down:before { 625 content: "\f063"; 626 } 627 .icon-share-alt:before, 628 .icon-mail-forward:before { 629 content: "\f064"; 630 } 631 .icon-resize-full:before { 632 content: "\f065"; 633 } 634 .icon-resize-small:before { 635 content: "\f066"; 636 } 637 .icon-plus:before { 638 content: "\f067"; 639 } 640 .icon-minus:before { 641 content: "\f068"; 642 } 643 .icon-asterisk:before { 644 content: "\f069"; 645 } 646 .icon-exclamation-sign:before { 647 content: "\f06a"; 648 } 649 .icon-gift:before { 650 content: "\f06b"; 651 } 652 .icon-leaf:before { 653 content: "\f06c"; 654 } 655 .icon-fire:before { 656 content: "\f06d"; 657 } 658 .icon-eye-open:before { 659 content: "\f06e"; 660 } 661 .icon-eye-close:before { 662 content: "\f070"; 663 } 664 .icon-warning-sign:before { 665 content: "\f071"; 666 } 667 .icon-plane:before { 668 content: "\f072"; 669 } 670 .icon-calendar:before { 671 content: "\f073"; 672 } 673 .icon-random:before { 674 content: "\f074"; 675 } 676 .icon-comment:before { 677 content: "\f075"; 678 } 679 .icon-magnet:before { 680 content: "\f076"; 681 } 682 .icon-chevron-up:before { 683 content: "\f077"; 684 } 685 .icon-chevron-down:before { 686 content: "\f078"; 687 } 688 .icon-retweet:before { 689 content: "\f079"; 690 } 691 .icon-shopping-cart:before { 692 content: "\f07a"; 693 } 694 .icon-folder-close:before { 695 content: "\f07b"; 696 } 697 .icon-folder-open:before { 698 content: "\f07c"; 699 } 700 .icon-resize-vertical:before { 701 content: "\f07d"; 702 } 703 .icon-resize-horizontal:before { 704 content: "\f07e"; 705 } 706 .icon-bar-chart:before { 707 content: "\f080"; 708 } 709 .icon-twitter-sign:before { 710 content: "\f081"; 711 } 712 .icon-facebook-sign:before { 713 content: "\f082"; 714 } 715 .icon-camera-retro:before { 716 content: "\f083"; 717 } 718 .icon-key:before { 719 content: "\f084"; 720 } 721 .icon-cogs:before { 722 content: "\f085"; 723 } 724 .icon-comments:before { 725 content: "\f086"; 726 } 727 .icon-thumbs-up:before { 728 content: "\f087"; 729 } 730 .icon-thumbs-down:before { 731 content: "\f088"; 732 } 733 .icon-star-half:before { 734 content: "\f089"; 735 } 736 .icon-heart-empty:before { 737 content: "\f08a"; 738 } 739 .icon-signout:before { 740 content: "\f08b"; 741 } 742 .icon-linkedin-sign:before { 743 content: "\f08c"; 744 } 745 .icon-pushpin:before { 746 content: "\f08d"; 747 } 748 .icon-external-link:before { 749 content: "\f08e"; 750 } 751 .icon-signin:before { 752 content: "\f090"; 753 } 754 .icon-trophy:before { 755 content: "\f091"; 756 } 757 .icon-github-sign:before { 758 content: "\f092"; 759 } 760 .icon-upload-alt:before { 761 content: "\f093"; 762 } 763 .icon-lemon:before { 764 content: "\f094"; 765 } 766 .icon-phone:before { 767 content: "\f095"; 768 } 769 .icon-check-empty:before { 770 content: "\f096"; 771 } 772 .icon-bookmark-empty:before { 773 content: "\f097"; 774 } 775 .icon-phone-sign:before { 776 content: "\f098"; 777 } 778 .icon-twitter:before { 779 content: "\f099"; 780 } 781 .icon-facebook:before { 782 content: "\f09a"; 783 } 784 .icon-github:before { 785 content: "\f09b"; 786 } 787 .icon-unlock:before { 788 content: "\f09c"; 789 } 790 .icon-credit-card:before { 791 content: "\f09d"; 792 } 793 .icon-rss:before { 794 content: "\f09e"; 795 } 796 .icon-hdd:before { 797 content: "\f0a0"; 798 } 799 .icon-bullhorn:before { 800 content: "\f0a1"; 801 } 802 .icon-bell:before { 803 content: "\f0a2"; 804 } 805 .icon-certificate:before { 806 content: "\f0a3"; 807 } 808 .icon-hand-right:before { 809 content: "\f0a4"; 810 } 811 .icon-hand-left:before { 812 content: "\f0a5"; 813 } 814 .icon-hand-up:before { 815 content: "\f0a6"; 816 } 817 .icon-hand-down:before { 818 content: "\f0a7"; 819 } 820 .icon-circle-arrow-left:before { 821 content: "\f0a8"; 822 } 823 .icon-circle-arrow-right:before { 824 content: "\f0a9"; 825 } 826 .icon-circle-arrow-up:before { 827 content: "\f0aa"; 828 } 829 .icon-circle-arrow-down:before { 830 content: "\f0ab"; 831 } 832 .icon-globe:before { 833 content: "\f0ac"; 834 } 835 .icon-wrench:before { 836 content: "\f0ad"; 837 } 838 .icon-tasks:before { 839 content: "\f0ae"; 840 } 841 .icon-filter:before { 842 content: "\f0b0"; 843 } 844 .icon-briefcase:before { 845 content: "\f0b1"; 846 } 847 .icon-fullscreen:before { 848 content: "\f0b2"; 849 } 850 .icon-group:before { 851 content: "\f0c0"; 852 } 853 .icon-link:before { 854 content: "\f0c1"; 855 } 856 .icon-cloud:before { 857 content: "\f0c2"; 858 } 859 .icon-beaker:before { 860 content: "\f0c3"; 861 } 862 .icon-cut:before { 863 content: "\f0c4"; 864 } 865 .icon-copy:before { 866 content: "\f0c5"; 867 } 868 .icon-paper-clip:before { 869 content: "\f0c6"; 870 } 871 .icon-save:before { 872 content: "\f0c7"; 873 } 874 .icon-sign-blank:before { 875 content: "\f0c8"; 876 } 877 .icon-reorder:before { 878 content: "\f0c9"; 879 } 880 .icon-list-ul:before { 881 content: "\f0ca"; 882 } 883 .icon-list-ol:before { 884 content: "\f0cb"; 885 } 886 .icon-strikethrough:before { 887 content: "\f0cc"; 888 } 889 .icon-underline:before { 890 content: "\f0cd"; 891 } 892 .icon-table:before { 893 content: "\f0ce"; 894 } 895 .icon-magic:before { 896 content: "\f0d0"; 897 } 898 .icon-truck:before { 899 content: "\f0d1"; 900 } 901 .icon-pinterest:before { 902 content: "\f0d2"; 903 } 904 .icon-pinterest-sign:before { 905 content: "\f0d3"; 906 } 907 .icon-google-plus-sign:before { 908 content: "\f0d4"; 909 } 910 .icon-google-plus:before { 911 content: "\f0d5"; 912 } 913 .icon-money:before { 914 content: "\f0d6"; 915 } 916 .icon-caret-down:before { 917 content: "\f0d7"; 918 } 919 .icon-caret-up:before { 920 content: "\f0d8"; 921 } 922 .icon-caret-left:before { 923 content: "\f0d9"; 924 } 925 .icon-caret-right:before { 926 content: "\f0da"; 927 } 928 .icon-columns:before { 929 content: "\f0db"; 930 } 931 .icon-sort:before { 932 content: "\f0dc"; 933 } 934 .icon-sort-down:before { 935 content: "\f0dd"; 936 } 937 .icon-sort-up:before { 938 content: "\f0de"; 939 } 940 .icon-envelope-alt:before { 941 content: "\f0e0"; 942 } 943 .icon-linkedin:before { 944 content: "\f0e1"; 945 } 946 .icon-undo:before, 947 .icon-rotate-left:before { 948 content: "\f0e2"; 949 } 950 .icon-legal:before { 951 content: "\f0e3"; 952 } 953 .icon-dashboard:before { 954 content: "\f0e4"; 955 } 956 .icon-comment-alt:before { 957 content: "\f0e5"; 958 } 959 .icon-comments-alt:before { 960 content: "\f0e6"; 961 } 962 .icon-bolt:before { 963 content: "\f0e7"; 964 } 965 .icon-sitemap:before { 966 content: "\f0e8"; 967 } 968 .icon-umbrella:before { 969 content: "\f0e9"; 970 } 971 .icon-paste:before { 972 content: "\f0ea"; 973 } 974 .icon-lightbulb:before { 975 content: "\f0eb"; 976 } 977 .icon-exchange:before { 978 content: "\f0ec"; 979 } 980 .icon-cloud-download:before { 981 content: "\f0ed"; 982 } 983 .icon-cloud-upload:before { 984 content: "\f0ee"; 985 } 986 .icon-user-md:before { 987 content: "\f0f0"; 988 } 989 .icon-stethoscope:before { 990 content: "\f0f1"; 991 } 992 .icon-suitcase:before { 993 content: "\f0f2"; 994 } 995 .icon-bell-alt:before { 996 content: "\f0f3"; 997 } 998 .icon-coffee:before { 999 content: "\f0f4"; 1000 } 1001 .icon-food:before { 1002 content: "\f0f5"; 1003 } 1004 .icon-file-alt:before { 1005 content: "\f0f6"; 1006 } 1007 .icon-building:before { 1008 content: "\f0f7"; 1009 } 1010 .icon-hospital:before { 1011 content: "\f0f8"; 1012 } 1013 .icon-ambulance:before { 1014 content: "\f0f9"; 1015 } 1016 .icon-medkit:before { 1017 content: "\f0fa"; 1018 } 1019 .icon-fighter-jet:before { 1020 content: "\f0fb"; 1021 } 1022 .icon-beer:before { 1023 content: "\f0fc"; 1024 } 1025 .icon-h-sign:before { 1026 content: "\f0fd"; 1027 } 1028 .icon-plus-sign-alt:before { 1029 content: "\f0fe"; 1030 } 1031 .icon-double-angle-left:before { 1032 content: "\f100"; 1033 } 1034 .icon-double-angle-right:before { 1035 content: "\f101"; 1036 } 1037 .icon-double-angle-up:before { 1038 content: "\f102"; 1039 } 1040 .icon-double-angle-down:before { 1041 content: "\f103"; 1042 } 1043 .icon-angle-left:before { 1044 content: "\f104"; 1045 } 1046 .icon-angle-right:before { 1047 content: "\f105"; 1048 } 1049 .icon-angle-up:before { 1050 content: "\f106"; 1051 } 1052 .icon-angle-down:before { 1053 content: "\f107"; 1054 } 1055 .icon-desktop:before { 1056 content: "\f108"; 1057 } 1058 .icon-laptop:before { 1059 content: "\f109"; 1060 } 1061 .icon-tablet:before { 1062 content: "\f10a"; 1063 } 1064 .icon-mobile-phone:before { 1065 content: "\f10b"; 1066 } 1067 .icon-circle-blank:before { 1068 content: "\f10c"; 1069 } 1070 .icon-quote-left:before { 1071 content: "\f10d"; 1072 } 1073 .icon-quote-right:before { 1074 content: "\f10e"; 1075 } 1076 .icon-spinner:before { 1077 content: "\f110"; 1078 } 1079 .icon-circle:before { 1080 content: "\f111"; 1081 } 1082 .icon-reply:before, 1083 .icon-mail-reply:before { 1084 content: "\f112"; 1085 } 1086 .icon-folder-close-alt:before { 1087 content: "\f114"; 1088 } 1089 .icon-folder-open-alt:before { 1090 content: "\f115"; 1091 } 1092 .icon-expand-alt:before { 1093 content: "\f116"; 1094 } 1095 .icon-collapse-alt:before { 1096 content: "\f117"; 1097 } 1098 .icon-smile:before { 1099 content: "\f118"; 1100 } 1101 .icon-frown:before { 1102 content: "\f119"; 1103 } 1104 .icon-meh:before { 1105 content: "\f11a"; 1106 } 1107 .icon-gamepad:before { 1108 content: "\f11b"; 1109 } 1110 .icon-keyboard:before { 1111 content: "\f11c"; 1112 } 1113 .icon-flag-alt:before { 1114 content: "\f11d"; 1115 } 1116 .icon-flag-checkered:before { 1117 content: "\f11e"; 1118 } 1119 .icon-terminal:before { 1120 content: "\f120"; 1121 } 1122 .icon-code:before { 1123 content: "\f121"; 1124 } 1125 .icon-reply-all:before { 1126 content: "\f122"; 1127 } 1128 .icon-mail-reply-all:before { 1129 content: "\f122"; 1130 } 1131 .icon-star-half-full:before, 1132 .icon-star-half-empty:before { 1133 content: "\f123"; 1134 } 1135 .icon-location-arrow:before { 1136 content: "\f124"; 1137 } 1138 .icon-crop:before { 1139 content: "\f125"; 1140 } 1141 .icon-code-fork:before { 1142 content: "\f126"; 1143 } 1144 .icon-unlink:before { 1145 content: "\f127"; 1146 } 1147 .icon-question:before { 1148 content: "\f128"; 1149 } 1150 .icon-info:before { 1151 content: "\f129"; 1152 } 1153 .icon-exclamation:before { 1154 content: "\f12a"; 1155 } 1156 .icon-superscript:before { 1157 content: "\f12b"; 1158 } 1159 .icon-subscript:before { 1160 content: "\f12c"; 1161 } 1162 .icon-eraser:before { 1163 content: "\f12d"; 1164 } 1165 .icon-puzzle-piece:before { 1166 content: "\f12e"; 1167 } 1168 .icon-microphone:before { 1169 content: "\f130"; 1170 } 1171 .icon-microphone-off:before { 1172 content: "\f131"; 1173 } 1174 .icon-shield:before { 1175 content: "\f132"; 1176 } 1177 .icon-calendar-empty:before { 1178 content: "\f133"; 1179 } 1180 .icon-fire-extinguisher:before { 1181 content: "\f134"; 1182 } 1183 .icon-rocket:before { 1184 content: "\f135"; 1185 } 1186 .icon-maxcdn:before { 1187 content: "\f136"; 1188 } 1189 .icon-chevron-sign-left:before { 1190 content: "\f137"; 1191 } 1192 .icon-chevron-sign-right:before { 1193 content: "\f138"; 1194 } 1195 .icon-chevron-sign-up:before { 1196 content: "\f139"; 1197 } 1198 .icon-chevron-sign-down:before { 1199 content: "\f13a"; 1200 } 1201 .icon-html5:before { 1202 content: "\f13b"; 1203 } 1204 .icon-css3:before { 1205 content: "\f13c"; 1206 } 1207 .icon-anchor:before { 1208 content: "\f13d"; 1209 } 1210 .icon-unlock-alt:before { 1211 content: "\f13e"; 1212 } 1213 .icon-bullseye:before { 1214 content: "\f140"; 1215 } 1216 .icon-ellipsis-horizontal:before { 1217 content: "\f141"; 1218 } 1219 .icon-ellipsis-vertical:before { 1220 content: "\f142"; 1221 } 1222 .icon-rss-sign:before { 1223 content: "\f143"; 1224 } 1225 .icon-play-sign:before { 1226 content: "\f144"; 1227 } 1228 .icon-ticket:before { 1229 content: "\f145"; 1230 } 1231 .icon-minus-sign-alt:before { 1232 content: "\f146"; 1233 } 1234 .icon-check-minus:before { 1235 content: "\f147"; 1236 } 1237 .icon-level-up:before { 1238 content: "\f148"; 1239 } 1240 .icon-level-down:before { 1241 content: "\f149"; 1242 } 1243 .icon-check-sign:before { 1244 content: "\f14a"; 1245 } 1246 .icon-edit-sign:before { 1247 content: "\f14b"; 1248 } 1249 .icon-external-link-sign:before { 1250 content: "\f14c"; 1251 } 1252 .icon-share-sign:before { 1253 content: "\f14d"; 1254 } 1255 .content,.content ul{margin:0!important} 1256 .410000{clear: both}.410001:after{display: block;visibility: hidden;content: ".";clear: both;text-indent: -9999px;height: 0;}.410002{margin-right: 0 !important}#sdgagdgd10000{width: 660px;padding: 40px;background: #FFF;margin: 20px auto;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;}.410003{background: none !important;width:740px !important;padding: 0px !important;}.vertical-nav{width: 200px;margin:0;padding:0;float: left;font-family: Segoe UI, Arial;position:relative;list-style: none;box-shadow: 0 1px 2px rgba(0,0,0,0.5);background: #fff;}#sdgagdgd10001{margin: 0 0 40px;font-size: 14px;color: #999;}.410004{display:block;margin:0 auto}.410005{float:right;margin:10px 0 10px 10px}.410006{float:left;margin:10px 10px 10px 0}.410007{float:left}.410008{float:right}.410009{text-align:center}.410010{text-align:right}.410011{text-align:left}.vertical-nav li{display: block;width: 100%;padding:0;float:left;font-size:14px;position:relative;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}.410012{border:1px solid #ddd;text-align:center;background-color:#f3f3f3;padding-top:4px;margin:10px;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}.410012 img{margin:0;padding:0;border:0 none;}.vertical-nav li a{width: 100%;display:block;padding:15px 20px 15px 19px;color: #888;text-decoration:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}.410012 p.410013{font-size:11px;line-height:17px;padding:0 4px 5px;margin:0;}.410014{margin:0 !important;max-height:1em;}.vertical-nav li:hover > a > i,.vertical-nav > li.active a > i{background: #95a5a6;color: #fff;}blockquote.410015{margin-right:20px;text-align:right;margin-left:0;width:33%;float:left;}blockquote.410016{margin-left:20px;text-align:left;margin-right:0;width:33%;float:right;}.410017 a{float: left;display: block;color: #666;margin-left: 5px;margin-bottom: 5px;padding: 3px 7px;line-height: 1em;background: #EEE;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}.vertical-nav ul, .vertical-nav ul li ul{list-style: none;margin: 0;padding: 0;display: none;position: absolute;z-index: 999;width:100%;background: #fff;box-shadow: 0 1px 3px rgba(0,0,0,0.3);}.vertical-nav ul{top: 0;left: 100%;}.410018{float: left;}#sdgagdgd10002{width: 100%;}#sdgagdgd10002 caption{text-align: right;color: #333;font-size: 12px;margin-top: 10px;margin-bottom: 15px;}.vertical-nav ul li ul{top: 1px;}.vertical-nav ul li{clear: both;width: 100%;}.vertical-nav ul li a{padding: 15px 20px;text-decoration:none;display:inline-block;border:0 none;float:left;clear:both;}#sdgagdgd10002 thead{font-size: 10px;}#sdgagdgd10002 thead th{padding-bottom: 10px;}#sdgagdgd10002 tbody{color: #aaa;}#sdgagdgd10002 tbody td{background: #f5f5f5;border: 1px solid #fff;text-align: center;padding:8px;}#sdgagdgd10002 tbody td:hover{background: #fff;}#sdgagdgd10002 tbody .410019{background: none;}#sdgagdgd10002 tfoot #sdgagdgd10003{font-size: 10px;text-transform: uppercase;text-align: right;}#sdgagdgd10002 tfoot #sdgagdgd10004{font-size: 10px;text-transform: uppercase;padding-top: 10px;}.vertical-nav .submenu-icon{font-family: ‘FontAwesome‘;font-size: 10px;float: right;margin-right: -10px;line-height: 24px;}.vertical-nav > li > a > .submenu-icon:before{content: "\f0c9";}.vertical-nav > li ul a .submenu-icon:before{content: "\f0c9";float: right;line-height: 23px;}#sdgagdgd10005{width: 740px;margin: 0 auto;position: relative;text-shadow: 1px 1px 1px #FFF;}#sdgagdgd10006{float: left;}#sdgagdgd10006 h2,#sdgagdgd10006 h1{margin: 0;line-height: 1em;font-size: 20px;font-weight: normal;font-style: normal;}#sdgagdgd10006 h2 a,#sdgagdgd10006 h1 a{color: #7B7B7B;text-decoration: none;}#sdgagdgd10006 h2 a:hover,#sdgagdgd10006 h1 a:hover{color: #000}#sdgagdgd10007{position: absolute;height: 48px;top: 4px;right: -15px;font-family: ‘Droid Sans‘, arial, serif;}.410020,.410020 *{margin: 0;padding: 0;list-style: none;}.410020{line-height: 1.0}.410020 ul{position: absolute;top: -999em;width: 10em;}.410020 ul li{width: 100%}.410020 li:hover{visibility: inherit;}.vertical-nav > li i{line-height: 24px !important;margin: -16px 14px 0 -20px;font-size: 25px;float: left;border-right: solid 1px #dedede;padding-right: 10px;padding:14px 15px 12px 15px;width: 28px;text-align: center;-o-transition: background .3s ease-in-out;-webkit-transition: background .3s ease-in-out;-moz-transition: background .3s ease-in-out;transition: background .3s ease-in-out;}.410020 li{float: left;position: relative;}.410020 a{display: block;position: relative;}.410020 li:hover ul,.410020 li.410021 ul{left: 0;top: 3em;z-index: 99;background: #FFF;padding: 10px 0;border: 1px solid #DDD;border-top: none;}ul.410020 li:hover li ul,ul.410020 li.410021 li ul{top: -999em}ul.410020 li li:hover ul,ul.410020 li li.410021 ul{left: 10em;top: 0;}.vertical-nav > li.showhide{display: none;width: 100%;height: 50px;cursor: pointer;color:#888;border-bottom: solid 1px rgba(0, 0, 0, 0.1);background: #fff;}.vertical-nav > li.showhide span.title{margin: 16px 0 0 25px;float: left;}ul.410020 li li:hover li ul,ul.410020 li li.410021 li ul{top: -999em}ul.410020 li li li:hover ul,ul.410020 li li li.410021 ul{left: 10em;top: 0;}.410020{float: left;margin-bottom: 1em;}.410020 a{color: #666;padding: 0 15px;text-decoration: none;}.410020 a:focus,.410020 a:hover,.410020 a:active{color: #000;}.vertical-nav > li.showhide span.icon{margin: 17px 20px;float: right;}.vertical-nav > li.showhide .icon em{margin-bottom: 3px;display: block;width: 20px;height: 2px;background: #ccc;}.410022 a{color: #000;}.410020 ul a:focus,.410020 ul a:hover,.410020 ul a:active{color: #000 !important;}li.410021{color: #000}.410020 li li{text-transform: none;}.410020 li li li{background: #FFF}.410020 ul a{color: #999;padding: 1em 1.2em}.410022 ul a{color: #000 !important;}.vertical-nav.dark, .vertical-nav.dark ul, .vertical-nav.dark ul li ul{background: #222!important;}.vertical-nav.dark > li.showhide{background: #222;color: #fff !important;}.vertical-nav.dark > li.showhide .icon em{background: #fff;}.410020 a.410023{padding-right: 2.25em;min-width: 1px;}.410024{position: absolute;display: block;right: .75em;width: 9px;height: 5px;text-indent: -999em;overflow: hidden;background: url(‘images/arrows-down.png‘);}a > .410024{top: .4em;background-position: 0 -100px;}a:focus > .410024,a:hover > .410024,a:active > .410024,li:hover > a > .410024,li.410021 > a > .410024{background-position: -9px 0px;}.red li:hover > a > i, .red li.active > a > i{background: #e74c3c;color: #fff!important;}.red li:hover > a{color: #e74c3c;}.410020 ul .410024{top: 1em;width: 5px;height: 9px;background: url(‘images/arrows-side.png‘);}.410020 ul a > .410024{background-position: 0 0}.410020 ul a:focus > .410024,.410020 ul a:hover > .410024,.410020 ul a:active > .410024,.410020 ul li:hover > a > .410024,.410020 ul li.410021 > a > .410024{background-position: -5px 0;}#sdgagdgd10008{margin-bottom: 40px;}.410025{float: left;width: 290px;margin-right: 25px;text-align: center;}.410025 h2{font-size: 16px;font-weight: bold;margin-bottom: 20px;}#sdgagdgd10009 h2{font-size: 14px;font-style: normal;margin-bottom: 20px;}#sdgagdgd10010{}#portfolio-group{margin: 40px 0px;}#sdgagdgd10011{list-style: none;}#sdgagdgd10011 a{font-size: 10px;font-weight: bold;float: left;padding: 5px 10px;margin-right: 5px;margin-bottom: 5px;cursor: pointer;color: #969696;background: -moz-linear-gradient( top, #f2f2f2 0%, #dbdbdb);background: -webkit-gradient( linear, left top, left bottom, from(#f2f2f2), to(#dbdbdb));border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 1px solid #CCC;text-shadow: 1px 1px 1px #FFF;}@media (max-width: 768px){.vertical-nav,.vertical-nav li{width: 100%;}.vertical-nav > li > a{padding-top:15px;padding-bottom:15px;padding-left: 25px;}.vertical-nav a{width: 100%;}.vertical-nav ul, .vertical-nav ul li ul{width: 100%;left: 0;border-left: none;position: static;}.vertical-nav ul li{background: #e9e9e9;}.vertical-nav.dark ul li{background: #333;}.vertical-nav ul li a{padding-top:10px;padding-bottom:10px;}.vertical-nav > li i{margin: -16px 14px 0 -25px;}.vertical-nav > li > ul > li > a{padding-left: 40px !important;}.vertical-nav > li > ul > li > ul > li > a{padding-left: 60px !important;}.vertical-nav > li > ul > li > ul > li > ul > li > a{padding-left: 80px !important;}.vertical-nav .submenu-icon{margin-right: 5px;}.vertical-nav ul .submenu-icon{display: none;}}#sdgagdgd10011 a:hover{background: #EEE;color: #666;}#sdgagdgd10011 a span{display: block;border-top: 1px solid #FFF;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}.410026{position: relative;float: left;width: 150px;margin-right: 20px;margin-bottom: 20px;cursor: pointer;}.410026 img{}.overlay{background: url(images/overlay-bg.png) repeat;width: 150px;height: 120px;position: absolute;display: none;left: 0;top: 0;}.410027 p{margin-top: 45px;margin-left: 40px;}.410028,.410029{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity: 0.60;-khtml-opacity: 0.60;opacity: 0.60;}.410028:hover,.410029:hover{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter: alpha(opacity=80);-moz-opacity: 0.80;-khtml-opacity: 0.80;opacity: 0.80;}.410028{display: block;float: left;margin-right: 10px;text-indent: -99999px;width: 32px;height: 32px;background: url(images/overlay-image.png);}.410029{display: block;float: left;text-indent: -99999px;width: 32px;height: 32px;background: url(images/overlay-link.png);}#sdgagdgd10012{float: left;width: 200px;}#sdgagdgd10013{float: right;width: 400px;}#sdgagdgd10014{padding: 25px 0;}#sdgagdgd10015 a,#sdgagdgd10016 a{display:block;float: left;height:30px;width:30px;margin-right: 5px;background:url(images/bx-arrows.png) no-repeat}#sdgagdgd10016 a{background-position: -30px 0;}#sdgagdgd10015 a:hover{background-position: 0px -30px;}#sdgagdgd10016 a:hover{background-position: -30px;}#sdgagdgd10017{position: relative;width: 660px;height: 350px;}.410030{position: relative}.410030 img{position: absolute;top: 0px;left: 0px;z-index: 6;}.410030 a.410031{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;border: 0;padding: 0;margin: 0;z-index: 6;display: none;}.410032{display: block;position: absolute;z-index: 5;height: 100%;}.410033{display: block;position: absolute;z-index: 5;}.410034{position:absolute;left:0px;bottom:0px;background:#000;color:#fff;opacity:0.8;width:100%;z-index:8;}.410034 p{padding:5px;margin:0;}.410034 a{display:inline !important;}.410035{display:none;}.410036 a{position: absolute;top: 45%;z-index: 9;cursor: pointer;}.410037{left: 0px}.410038{right: 0px}.410039 a{position: relative;z-index: 9;cursor: pointer;}.410039 a.410040{font-weight: bold}.410036 a{display: block;width: 20px;height: 40px;background: url(images/slider-arrows.png) no-repeat;text-indent: -9999px;border: 0;-webkit-transition: hover 0.2s ease-in-out;-moz-transition: hover 0.2s ease-in-out;-o-transition: hover 0.2s ease-in-out;-ms-transition: hover 0.2s ease-in-out;transition: hover 0.2s ease-in-out;}.410036 a:hover{background: url(images/slider-arrows-hover.png) no-repeat;}a.410038{background-position: -20px 0 !important;right: -20px;}a.410037{left: -20px}#sdgagdgd10018{}.post-entry{margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid #EEE;}.410041{margin-bottom: 20px;}.410042{float: left;height: 150px;width: 150px;}.410043{float: right;width: 480px;}#sdgagdgd10018 ul,ol{margin-left: 50px;margin-bottom: 10px;}.410044,.410045{background: #F9F9F9;font-size: 11px;color: #999;padding: 5px;margin: 8px 0px;text-shadow: 1px 1px 1px #FFF;letter-spacing: 1px;}.410044 a,.410045 a,.410044 span,.410045 span{color: #000;}.410045{margin-bottom: 20px !important;}.410046{margin-right: 10px;margin-top: 30px;font-size: 12px;}.410046 a{margin-left: 5px;}#sdgagdgd10018 h1{margin-bottom: 0px}.410047 h2{line-height: 1.2em;margin: 0 !important;font-size: 21px;}.410047 h2 a{text-decoration: none;}.410048{margin-bottom: 20px !important;}#sdgagdgd10019{font-size: 14px;padding: 20px 0px;margin-bottom: 40px;border-bottom: 1px dotted #CCC;}#sdgagdgd10019 p{margin: 0;padding: 0;}#sdgagdgd10020{margin-bottom: 20px;}#sdgagdgd10021{float: left;width: 50%;}#sdgagdgd10022{float: right;width: 50%;text-align: right;}#sdgagdgd10021 a{float: left;}#sdgagdgd10022 a{float: right !important;}#sdgagdgd10023{background: #F9F9F9;margin: 30px 0px;padding: 20px;border-top: 1px solid #EEE;border-bottom: 1px solid #EEE;}#sdgagdgd10024{float: left;width: 70px;}#sdgagdgd10024 img{padding: 3px;border: 1px solid #CCC;}#sdgagdgd10025{float: right;width: 540px;}#sdgagdgd10023 h4{margin-top: 0px;margin-bottom: 5px;}#sdgagdgd10026{margin: 20px 0;padding-bottom: 20px;border-bottom: 1px solid #EEE;color: #999;}.410049{margin-bottom: 20px}.410050{float: left;width: 60px;margin-right: 20px;}.410050 img{padding: 3px;border: 1px solid #EEE;}.410051{float: right;width: 580px;}#sdgagdgd10026 h3{margin: 0 0 20px}#sdgagdgd10026 h4{font-size: 12px;font-style: normal;margin-top: 0px;margin-bottom: 5px;}#sdgagdgd10026 h4 a:hover{text-decoration: none;}#sdgagdgd10027{}#commentsbox{margin-top: 30px}#sdgagdgd10028 ol,#sdgagdgd10028 ul{list-style: none;margin-left: 0 !important;}#sdgagdgd10028 li{margin-bottom: 30px}.410052{list-style: none;margin: 30px 0 0;text-indent: 0;}.410052 li.410053{margin: 0 0 0px 50px}.410052 li.410054{margin: 0 0 0px 50px}.410052 li.410055{margin: 0 0 0px 50px}.410052 li.410056{margin: 0 0 0px 50px}.410057{background: #FFF;position: relative;padding: 20px;border-bottom: 1px dashed #E3E3E3;}#sdgagdgd10028 .410058{float: left;margin-right: 30px;}.410059{font-size: 12px;color: #000;line-height: 1em;margin-bottom: 5px;}.410060{display: none}.410061 a{margin-bottom: 10px;font-size: 10px;font-style: italic;color: #666;}.410062{font-size: 10px;position: absolute;bottom: -10px;right: 0;border: 1px solid #E3E3E3;padding: 0 8px;background: #EEE;color: #666;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;}.410063 a{color: #F00;line-height: 20px;height: 20px;}.410063 a:hover{text-decoration: underline;}#sdgagdgd10029{margin: 40px 0 15px}#sdgagdgd10030{margin: 0 0 10px;padding: 0;clear: both;}#sdgagdgd10031 label{display: block;font-size: 11px;}#sdgagdgd10031 input{margin-bottom: 10px;width: 40%;}#sdgagdgd10031 textarea{margin-top: 10px;display: block;width: 70%;}#sdgagdgd10031 input#sdgagdgd10032,#sdgagdgd10031 input#sdgagdgd10033,#sdgagdgd10031 input#sdgagdgd10034,#sdgagdgd10031 textarea{background: #FFF;position: relative;padding: 5px;border: 1px solid #E3E3E3;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}#sdgagdgd10031 input#sdgagdgd10032:focus,#sdgagdgd10031 input#sdgagdgd10033:focus,#sdgagdgd10031 input#sdgagdgd10034:focus,#sdgagdgd10031 textarea:focus{-moz-box-shadow: 3px 3px 0px #EEE;-webkit-box-shadow: 3px 3px 0px #EEE;box-shadow: 3px 3px 0px #EEE;}#sdgagdgd10035{cursor: pointer;font-size: 12px;color: #969696;padding: 5px 0px;width: 100px !important;background: -moz-linear-gradient( top, #f2f2f2 0%, #dbdbdb);background: -webkit-gradient( linear, left top, left bottom, from(#f2f2f2), to(#dbdbdb));border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 1px solid #CCC;}#sdgagdgd10035:hover{background: #EEE !important}.410064{position: absolute;left: 0;bottom: 0;color: #EEE;}body{margin: 0;padding: 0;background: #dedede url(img/back.png) repeat;}.content{margin: 10px 50px 0 50px;}.panel{position:relative;top:0;width:auto;margin:40px 0;}.panel a{display: inline-block;width:20px;margin: 0;height:20px;outline:none;border-radius:2px;}.panel a:nth-child(1){background: #95a5a6;}.panel a:nth-child(2){background: #3498db;}.panel a:nth-child(3){background: #075395;}.panel a:nth-child(4){background: #2ecc71;}.panel a:nth-child(5){background: #299a0b;}.panel a:nth-child(6){background: #e74c3c;}.panel a:nth-child(7){background: #a90329;}.panel a:nth-child(8){background: #9b59b6;}.panel a:nth-child(9){background: #ff5db1;}.panel a:nth-child(10){background: #f39c12;}.panel a:nth-child(11){background: #ca4a00;}.panel a:nth-child(12){background: #ffcf41;}.vertical-nav{margin: 20px 0 0 0;}
3、效果：
三、立体动感菜单
1、代码：
1 <!DOCTYPE html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>纯CSS3实现的动感菜单</title> 5 6 <style type="text/css"> 7 8 * { margin:0; 9 padding:0; 10 } 11 12 html {height: 100%;} 13 14 body{ 15 position: relative; 16 height: 100%; 17 background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff)); 18 19 } 20 21 .navbox { 22 position: relative; 23 float: left; 24 } 25 26 ul.nav { 27 list-style: none; 28 display: block; 29 width: 200px; 30 position: relative; 31 top: 100px; 32 left: 100px; 33 padding: 60px 0 60px 0; 34 background: url(images/shad2.png) no-repeat; 35 -webkit-background-size: 50% 100%; 36 } 37 38 li { 39 margin: 5px 0 0 0; 40 } 41 42 ul.nav li a { 43 -webkit-transition: all 0.3s ease-out; 44 background: #cbcbcb url(images/border.png) no-repeat; 45 color: #174867; 46 padding: 7px 15px 7px 15px; 47 -webkit-border-top-right-radius: 10px; 48 -webkit-border-bottom-right-radius: 10px; 49 width: 100px; 50 display: block; 51 text-decoration: none; 52 -webkit-box-shadow: 2px 2px 4px #888; 53 } 54 55 ul.nav li a:hover { 56 background: #ebebeb url(images/border.png) no-repeat; 57 color: #67a5cd; 58 padding: 7px 15px 7px 30px; 59 } 60 61 </style> 62 63 </head> 64 65 <body> 66 67 <div class="navbox"> 68 <ul class="nav"> 69 <li><a href="">XHTML</a></li> 70 <li><a href="">C++</a></li> 71 <li><a href="">Mootools</a></li> 72 <li><a href="">HTML5</a></li> 73 <li><a href="">CSS</a></li> 74 <li><a href="">jQuery</a></li> 75 <li><a href="">Ajax</a></li> 76 <li><a href="">PHP</a></li> 77 <li><a href="">Perl</a></li> 78 </ul> 79 </div> 80 81 <div class="navbox"> 82 <ul class="nav"> 83 <li><a href="">XHTML</a></li> 84 <li><a href="">HTML5</a></li> 85 <li><a href="">CSS</a></li> 86 <li><a href="">jQuery</a></li> 87 <li><a href="">Ajax</a></li> 88 <li><a href="">PHP</a></li> 89 </ul> 90 </div> 91 92 <div class="navbox"> 93 <ul class="nav"> 94 <li><a href="">XHTML</a></li> 95 <li><a href="">HTML5</a></li> 96 <li><a href="">CSS</a></li> 97 </ul> 98 </div> 99 100 </body> 101 </html>
2、效果：
四、可同时折叠的手风琴菜单
1、代码：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 6 <meta charset="UTF-8"> 7 8 <title>CSS3手风琴菜单</title> 9 10 <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /> 11 12 </head> 13 14 <body> 15 <div style="text-align:center;clear:both"> 16 <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> 17 <script src="/follow.js" type="text/javascript"></script> 18 </div> 19 <ul> 20 <li class="block"> 21 <input type="checkbox" name="item" id="item1" /> 22 <label for="item1"><i aria-hidden="true" class="icon-users"></i> Friends <span>124</span></label> 23 <ul class="options"> 24 <li><a href="#"><i aria-hidden="true" class="icon-search"></i> Find New Friends</a></li> 25 <li><a href="#"><i aria-hidden="true" class="icon-point-right"></i> Poke A Friend</a></li> 26 <li><a href="#"><i aria-hidden="true" class="icon-fire"></i> Incinerate Existing Friends</a></li> 27 </ul> 28 </li> 29 <li class="block"> 30 <input type="checkbox" name="item" id="item2" /> 31 <label for="item2"><i aria-hidden="true" class="icon-film"></i> Videos <span>1,034</span></label> 32 <ul class="options"> 33 <li><a href="#"><i aria-hidden="true" class="icon-movie"></i> My Videos <span>7</span></a></li> 34 <li><a href="#"><i aria-hidden="true" class="icon-download"></i> My Downloaded Videos <span>3</span></a></li> 35 <li><a href="#"><i aria-hidden="true" class="icon-warning"></i> My Well Dodgy Videos <span>1,024</span></a></li> 36 </ul> 37 </li> 38 <li class="block"> 39 <input type="checkbox" name="item" id="item3" /> 40 <label for="item3"><i aria-hidden="true" class="icon-images"></i> Galleries <span>4</span></label> 41 <ul class="options"> 42 <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-deviantart"></i> My Deviant Art</a></li> 43 <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-dribbble"></i> Latest Dribbble Images</a></li> 44 <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-flickr"></i> Sample Flickr Stream</a></li> 45 <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-picassa"></i> Sample Picasa Stream</a></li> 46 </ul> 47 </li> 48 <li class="block"> 49 <input type="checkbox" name="item" id="item4" /> 50 <label for="item4"><i aria-hidden="true" class="icon-microphone"></i> Podcasts <span>1</span></label> 51 <ul class="options"> 52 <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-music"></i> CSS-Tricks</a></li> 53 </ul> 54 </li> 55 <li class="block"> 56 <input type="checkbox" name="item" id="item5" /> 57 <label for="item5"><i aria-hidden="true" class="icon-android"></i> Robots <span>3</span></label> 58 <ul class="options"> 59 <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-eye"></i> Hal 9000</a></li> 60 <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-cloud"></i> Skynet</a></li> 61 <li><a href="#" target="_blank"><i aria-hidden="true" class="icon-reddit"></i> Johnny 5</a></li> 62 </ul> 63 </li> 64 </ul> 65 66 </body> 67 68 </html>
2、效果：
五、鼠标滑动展开二级菜单
1、代码：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 6 <meta charset="UTF-8"> 7 8 <title>纯CSS3垂直动画菜单</title> 9 10 <link rel=‘stylesheet prefetch‘ href=‘http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css‘> 11 <link rel=‘stylesheet prefetch‘ href=‘http://puertokhalid.com/up/demos/puerto-Mega_Menu/css/normalize.css‘> 12 13 <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /> 14 15 </head> 16 17 <body> 18 19 <div class="container"> 20 <nav> 21 <ul class="mcd-menu"> 22 <li> 23 <a href=""> 24 <i class="fa fa-home"></i> 25 <strong>Home</strong> 26 <small>sweet home</small> 27 </a> 28 </li> 29 <li> 30 <a href="" class="active"> 31 <i class="fa fa-edit"></i> 32 <strong>About us</strong> 33 <small>sweet home</small> 34 </a> 35 </li> 36 <li> 37 <a href=""> 38 <i class="fa fa-gift"></i> 39 <strong>Features</strong> 40 <small>sweet home</small> 41 </a> 42 </li> 43 <li> 44 <a href=""> 45 <i class="fa fa-globe"></i> 46 <strong>News</strong> 47 <small>sweet home</small> 48 </a> 49 </li> 50 <li> 51 <a href=""> 52 <i class="fa fa-comments-o"></i> 53 <strong>Blog</strong> 54 <small>what they say</small> 55 </a> 56 <ul> 57 <li><a href="#"><i class="fa fa-globe"></i>Mission</a></li> 58 <li> 59 <a href="#"><i class="fa fa-group"></i>Our Team</a> 60 <ul> 61 <li><a href="#"><i class="fa fa-female"></i>Leyla Sparks</a></li> 62 <li> 63 <a href="#"><i class="fa fa-male"></i>Gleb Ismailov</a> 64 <ul> 65 <li><a href="#"><i class="fa fa-leaf"></i>About</a></li> 66 <li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li> 67 </ul> 68 </li> 69 <li><a href="#"><i class="fa fa-female"></i>Viktoria Gibbers</a></li> 70 </ul> 71 </li> 72 <li><a href="#"><i class="fa fa-trophy"></i>Rewards</a></li> 73 <li><a href="#"><i class="fa fa-certificate"></i>Certificates</a></li> 74 </ul> 75 </li> 76 <li> 77 <a href=""> 78 <i class="fa fa-picture-o"></i> 79 <strong>Portfolio</strong> 80 <small>sweet home</small> 81 </a> 82 </li> 83 <li> 84 <a href=""> 85 <i class="fa fa-envelope-o"></i> 86 <strong>Contacts</strong> 87 <small>drop a line</small> 88 </a> 89 </li> 90 <li class="float"> 91 <a class="search"> 92 <input type="text" value="search ..."> 93 <button><i class="fa fa-search"></i></button> 94 </a> 95 <a href="" class="search-mobile"> 96 <i class="fa fa-search"></i> 97 </a> 98 </li> 99 </ul> 100 </nav> 101 </div> 102 <div style="text-align:center;clear:both"> 103 <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> 104 <script src="/follow.js" type="text/javascript"></script> 105 </div> 106 </body> 107 108 </html>
2、效果：
六、垂直多级菜单，显示未读数目和折叠
1、代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 6 <title>jQuery 3D 垂直多级菜单 可筛选菜单</title> 7 8 <link href="css/jquery-accordion-menu.css" rel="stylesheet" type="text/css" /> 9 <link href="css/font-awesome.css" rel="stylesheet" type="text/css" /> 10 11 <style type="text/css"> 12 *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} 13 body{background:#f0f0f0;} 14 .content{width:260px;margin:20px auto;} 15 .filterinput{ 16 background-color:rgba(249, 244, 244, 0); 17 border-radius:15px; 18 width:90%; 19 height:30px; 20 border:thin solid #FFF; 21 text-indent:0.5em; 22 font-weight:bold; 23 color:#FFF; 24 } 25 #demo-list a{ 26 overflow:hidden; 27 text-overflow:ellipsis; 28 -o-text-overflow:ellipsis; 29 white-space:nowrap; 30 width:100%; 31 } 32 </style> 33 34 <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script> 35 <script src="js/jquery-accordion-menu.js" type="text/javascript"></script> 36 <script type="text/javascript"> 37 38 $(function(){ 39 //顶部导航切换 40 $("#demo-list li").click(function(){ 41 $("#demo-list li.active").removeClass("active") 42 $(this).addClass("active"); 43 }) 44 }) 45 </script> 46 </head> 47 <body> 48 <div style="text-align:center;clear:both"> 49 <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> 50 <script src="/follow.js" type="text/javascript"></script> 51 </div> 52 <div class="content"> 53 54 <div id="jquery-accordion-menu" class="jquery-accordion-menu red"> 55 <div class="jquery-accordion-menu-header" id="form"></div> 56 <ul id="demo-list"> 57 58 <li class="active"><a href="#"><i class="fa fa-home"></i>Home </a></li> 59 <li><a href="#"><i class="fa fa-glass"></i>Events </a></li> 60 <li><a href="#"><i class="fa fa-file-image-o"></i>Gallery </a><span class="jquery-accordion-menu-label"> 61 12 </span></li> 62 <li><a href="#"><i class="fa fa-cog"></i>Services </a> 63 <ul class="submenu"> 64 <li><a href="#">Web Design </a></li> 65 <li><a href="#">Hosting </a></li> 66 <li><a href="#">Design </a> 67 <ul class="submenu"> 68 <li><a href="#">Graphics </a></li> 69 <li><a href="#">Vectors </a></li> 70 <li><a href="#">Photoshop </a></li> 71 <li><a href="#">Fonts </a></li> 72 </ul> 73 </li> 74 <li><a href="#">Consulting </a></li> 75 </ul> 76 </li> 77 <li><a href="#"><i class="fa fa-home"></i>系统管理 </a></li> 78 <li><a href="#"><i class="fa fa-suitcase"></i>Portfolio </a> 79 <ul class="submenu"> 80 <li><a href="#">Web Design </a></li> 81 <li><a href="#">Graphics </a><span class="jquery-accordion-menu-label">10 </span> 82 </li> 83 <li><a href="#">Photoshop </a></li> 84 <li><a href="#">Programming </a></li> 85 </ul> 86 </li> 87 <li><a href="#"><i class="fa fa-user"></i>About </a></li> 88 <li><a href="#"><i class="fa fa-envelope"></i>Contact </a></li> 89 90 </ul> 91 <div class="jquery-accordion-menu-footer"> 92 Footer 93 </div> 94 </div> 95 </div> 96 97 <script type="text/javascript"> 98 (function($) { 99 $.expr[":"].Contains = function(a, i, m) { 100 return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 101 }; 102 function filterList(header, list) { 103 //@header 头部元素 104 //@list 无需列表 105 //创建一个搜素表单 106 var form = $("<form>").attr({ 107 "class":"filterform", 108 action:"#" 109 }), input = $("<input>").attr({ 110 "class":"filterinput", 111 type:"text" 112 }); 113 $(form).append(input).appendTo(header); 114 $(input).change(function() { 115 var filter = $(this).val(); 116 if (filter) { 117 $matches = $(list).find("a:Contains(" + filter + ")").parent(); 118 $("li", list).not($matches).slideUp(); 119 $matches.slideDown(); 120 } else { 121 $(list).find("li").slideDown(); 122 } 123 return false; 124 }).keyup(function() { 125 $(this).change(); 126 }); 127 } 128 $(function() { 129 filterList($("#form"), $("#demo-list")); 130 }); 131 })(jQuery); 132 </script> 133 134 <script type="text/javascript"> 135 136 jQuery("#jquery-accordion-menu").jqueryAccordionMenu(); 137 138 </script> 139 140 </body> 141 </html>
2、效果：
总结：
还有很多很多，这里就不一一列举出来了，还有这里的代码可能不全面，大家有需要的可以跟我要。大家一起学习！
CSS实现的几款不错的菜单栏
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。