下面我们一起来看看实现这款CSS3下拉菜单的过程和源码,代码比较简单,主要由HTML和CSS实现,并不需要JavaScript。
<div class="container"> <div class="menu style-1"> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#" class="arrow">Categories</a> <div class="mega-menu full-width"> <div class="col-1"> <h4><a href="#">Graphic Design</a></h4> <ol> <li><a href="#">Design</a></li> <li><a href="#">Logo Design</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Mehndi Designs</a></li> <li><a href="#">Vector Graphics</a></li> <li><a href="#">Wallpapers</a></li> </ol> </div> <div class="col-1"> <h4><a href="#">Web Design</a></h4> <ol> <li><a href="#">Website Design</a></li> <li><a href="#">HTML5 & CSS3</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">Coding</a></li> </ol> </div> <div class="col-1"> <h4><a href="#">Freebies</a></h4> <ol> <li><a href="#">Free Fonts</a></li> <li><a href="#">Icons</a></li> <li><a href="#">Free PSD Files</a></li> <li><a href="#">PSD Templats</a></li> <li><a href="#">Software & Utilities</a></li> </ol> </div> <div class="col-1"> <h4><a href="#">Inspiration</a></h4> <ol> <li><a href="#">Business Cards</a></li> <li><a href="#">Photography</a></li> <li><a href="#">Poster Design</a></li> <li><a href="#">Typography</a></li> <li><a href="#">Illustration Art</a></li> </ol> </div> <div class="col-1"> <h4><a href="#">Wordpress</a></h4> <ol> <li><a href="#">Wordpress Themes</a></li> <li><a href="#">Wordpress Plugins</a></li> </ol> </div> <div class="col-1"> <h4><a href="#">Technology</a></h4> <ol> <li><a href="#">Apple</a></li> <li><a href="#">Google</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">iPhone Games</a></li> <li><a href="#">iPhone Apps</a></li> </ol> </div> </div> </li> <li><a href="#">Advertise</a></li> <li><a href="#">Write For Us</a></li> <li><a href="#">Contact Us</a></li> <li> <div id="sidesearch"> <form id="sitesearchform" style="display:inline" method="get" action="http://js.itivy.com/?"> <fieldset> <input class="sidesearch_input" type="text" value="e.g: Web Design" onfocus="if (this.value == 'e.g: Web Design') {this.value = '';}" x-webkit-speech="" onwebkitspeechchange="transcribe(this.value)" onblur="if (this.value == '') {this.value = 'e.g: Web Design';}" name="s" id="s"> <input type="image" class="sidesearch_submit" src="images/sidesearchsubmit.png" /> </fieldset> </form> </div> </li> <li class="right"><a href="#" class="arrow">Follow Us</a> <ul> <li><a href="#" class="rss" title="Subscribe to RSS">RSS</a></li> <li><a href="#" class="twitter" title="Follow us on Twitter">Twitter</a></li> <li><a href="#" class="facebook" title="Follow us on Facebook">Facebook</a></li> <li><a href="#" class="googleplus" title="Follow us on Google+">Google+</a></li> <li><a href="#" class="pinterest" title="Follow us on Pinterest">Pinterest</a></li> <li><a href="#" class="stumbleupon" title="Follow us on Stumbleupon">Stumbleupon</a></li> </ul> </li> </ul> </div> </div>
这里利用了经典的div结构和ol li列表结构,来构造可下拉展示的菜单。
.menu{display:block;position:relative} .menu, .menu ul{margin:0;padding:0;list-style:none;position:relative; background-color:#ffffff;border: 1px solid #E1E1E1; border-radius: 5px;} .menu ul a{float:left} .menu ul ul a{float:none;} .menu .mega-menu a{float:none;padding:3px;} .menu ul ul, .menu .mega-menu, .menu .mega-menu ol li{opacity:0;visibility:hidden;display:none ! important/9;-webkit-transition:opacity 150ms ease-in-out;-moz-transition:opacity 150ms ease-in-out;-o-transition:opacity 150ms ease-in-out;-ms-transition:opacity 150ms ease-in-out;transition:opacity 150ms ease-in-out} .menu li:hover>ul, .menu li:hover> .mega-menu, .menu li:hover> .mega-menu ol li{opacity:1;visibility:visible;display:block ! important/9} .menu ul:after{content:"";clear:both;display:block} .menu ul li{float:left;-webkit-transition:all 150ms ease-in-out;-moz-transition:all 150ms ease-in-out;-o-transition:all 150ms ease-in-out;-ms-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out} .menu ul li a{display:block;padding:14px 20px 15px 20px;color:#fff;text-decoration:none; border-right: 1px solid rgba(f, f, f, 0.9); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1);} .menu .arrow:after{content:"";float:right;text-align:right;width:0;height:0;display:block;border-left:3px solid rgba(0,0,0,0);border-right:3px solid rgba(0,0,0,0);border-top:3px solid #fff;top:9px;margin:0 0 0 5px;position:relative;border-left:3px solid transparent/9;border-right:3px solid transparent/9} .menu ul li ul li .arrow:after{border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:3px solid #bbb;margin:-2px 0 0 5px} .menu i{font-size:14px;font-style:normal;float:left;margin:4px 4px 0 -2px;line-height:14px;padding:0} .menu .right{float:right;} .menu .right ul, .menu .right .mega-menu{right:0} .menu ul ul{background:#fff;border:1px solid #e0e0e0;border-top:0;border-bottom:0;position:absolute;top:100%;width:170px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.04);box-shadow:0 1px 1px rgba(0,0,0,.04)} .menu ul ul ul{position:absolute;left:100%;border-top:1px solid #e0e0e0;top:-1px} .menu ul ul li a{padding:8px 12px;color:#777;border-bottom:1px solid #e4e4e4; background:#FFFFFF;} .menu ul ul li{float:none;position:relative;-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none;transition:none} .menu ul ul li a:active, .menu ul ul li:hover{background:#f5f5f5} .menu ul ul li{background:#fff} .mega-menu{position:absolute;top:100%;padding:18px 11px;background-color:#fff;border:1px solid #e0e0e0;border-top:none;color:#777;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.04);box-shadow:0 1px 1px rgba(0,0,0,.04);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .mega-menu ol{list-style:none;padding:0} .mega-menu ol li{width:100%} .mega-menu ol li:hover, .mega-menu ol li a{color:#777;font-size:14px;padding:0;background-color:#fff;background-image:none;} .mega-menu ol li a:hover{color:#505050; background-color:#edf1f8; padding-left:8px;} .mega-menu div h4{font-size:16px;color:#404040;border-bottom:1px solid #e4e4e4;padding:0 0 8px 0;margin:0 0 10px 0; font-weight:normal} .mega-menu div h4 a{color:#000;} .mega-menu .col-1{width:135px} .mega-menu .col-2{width:288px} .mega-menu .col-3{width:441px} .mega-menu .col-4{width:594px} .mega-menu .col-5{width:747px} .mega-menu .col-6{width:900px} .mega-menu .col-1, .mega-menu .col-2, .mega-menu .col-3, .mega-menu .col-4, .mega-menu .col-5, .mega-menu .col-6{float:left;margin:0 9px} .mega-menu.full-width{left:0;width:100%;padding:18px 0}.full-width .col-1{width:14.1%}.full-width .col-2{width:30.4%}.full-width .col-3{width:46.7%}.full-width .col-4{width:63%}.full-width .col-5{width:79.3%}.full-width .col-6{width:95.6%}.full-width .col-1,.full-width .col-2,.full-width .col-3,.full-width .col-4,.full-width .col-5,.full-width .col-6{float:left;margin:0 0 0 2.2%}@media only screen and (max-width: 767px){ .menu ul li{width:100%;cursor:pointer} .menu ul li{position:relative} .menu .mega-menu ol li{height:0} .menu li:hover> .mega-menu ol li{height:auto} .mega-menu, .menu ul ul{z-index:100} .menu ul ul{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .menu ul ul ul{left:0} .menu ul ul li:hover>ul{position:relative;border:none;border-top:1px solid #e4e4e4;-webkit-box-shadow:none;box-shadow:none} .menu ul li ul li .arrow:after{border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #bbb;margin:0} .mega-menu{padding:18px 0} .mega-menu ol li:last-child{margin:0 0 20px 0} .menu .col-1,.full-width .col-1, .menu .col-2,.full-width .col-2, .menu .col-3,.full-width .col-3, .menu .col-4,.full-width .col-4, .menu .col-5,.full-width .col-5, .menu .col-6,.full-width .col-6{float:left;margin:0 0 0 5%;width:90%}} .style-1 .menu, .style-1 .menu ul li { background-color: #446cb3; background-image: linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%); background-image: -o-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%); background-image: -moz-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%); background-image: -webkit-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%); background-image: -ms-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.04) 0%); } .style-1 .menu ul li:hover { background-color: #eb4e01; background-image: linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); background-image: -o-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); background-image: -moz-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); background-image: -webkit-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); background-image: -ms-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%); } a.rss:hover{ background:#ffaa31; color:#fff; padding-left:20px;} a.twitter:hover{background:#07beed; color:#fff; padding-left:20px;} a.facebook:hover{background:#314d91; color:#fff; padding-left:20px;} a.googleplus:hover{background:#2d2d2d; color:#fff; padding-left:20px;} a.pinterest:hover{background:#cd1d1f; color:#fff; padding-left:20px;} a.stumbleupon:hover{background:#ec4b24; color:#fff; padding-left:20px;}
CSS代码相对比较复杂,但是也没有用到复杂的CSS3属性,只是用到了圆角和阴影。