Sexy Drop Down Menu with CSS & jQuery
非常酷的下拉导航条是基于CSS & jQuery
一个很酷的下拉菜单,是黑金酷的,非常完美,是基于CSS & jQuery开发的。符合WEB标准,完美用户体验。
此下拉效果的导航条,也非常方便移植和使用。
此例子由 Tutorial by Soh Tanaka – www.SohTanaka.com提供。
jQuery Code
你可以把代码放在js文件里,样式,结构,行为进行分离
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | $(document).ready(function(){ $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav $("ul.topnav li span").click(function() { //When trigger is clicked... //Following events are applied to the subnav itself (moving subnav up and down) $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click $(this).parent().hover(function() { }, function(){ $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up }); //Following events are applied to the trigger (Hover events for the trigger) }).hover(function() { $(this).addClass("subhover"); //On hover over, add class "subhover" }, function(){ //On Hover Out $(this).removeClass("subhover"); //On hover out, remove class "subhover" }); }); |
Css Code
你可以把代码放在Css文件里,样式,结构,行为进行分离
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | body { margin: 0; padding: 0; font: 10px normal Arial, Helvetica, sans-serif; background: #ddd url(body_bg.gif) repeat-x; } .container { width: 960px; margin: 0 auto; position: relative; } #header { background: url(header_bg.gif) no-repeat center top; padding-top: 120px; } #header .disclaimer { color: #999; padding: 100px 0 7px 0; text-align: right; display: block; position: absolute; top: 0; right: 0; } #header .disclaimer a { color: #ccc;} ul.topnav { list-style: none; padding: 0 20px; margin: 0; float: left; width: 920px; background: #222; font-size: 1.2em; background: url(topnav_bg.gif) repeat-x; } ul.topnav li { float: left; margin: 0; padding: 0 15px 0 0; position: relative; /*--Declare X and Y axis base--*/ } ul.topnav li a{ padding: 10px 5px; color: #fff; display: block; text-decoration: none; float: left; } ul.topnav li a:hover{ background: url(topnav_hover.gif) no-repeat center top; } ul.topnav li span { /*--Drop down trigger styles--*/ width: 17px; height: 35px; float: left; background: url(subnav_btn.gif) no-repeat center top; } ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/ ul.topnav li ul.subnav { list-style: none; position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ left: 0; top: 35px; background: #333; margin: 0; padding: 0; display: none; float: left; width: 170px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; border: 1px solid #111; } ul.topnav li ul.subnav li{ margin: 0; padding: 0; border-top: 1px solid #252525; /*--Create bevel effect--*/ border-bottom: 1px solid #444; /*--Create bevel effect--*/ clear: both; width: 170px; } html ul.topnav li ul.subnav li a { float: left; width: 145px; background: #333 url(dropdown_linkbg.gif) no-repeat 10px center; padding-left: 20px; } html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/ background: #222 url(dropdown_linkbg.gif) no-repeat 10px center; } #header img { margin: 20px 0 10px; } |
Html Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <div class="container"> <div id="header"> <div class="disclaimer">Sexy Drop Down Menu Tutorial by <a href="http://www.SohTanaka.com">Soh Tanaka</a>.</div> <ul class="topnav"> <li><a href="#">Home</a></li> <li> <a href="#">Tutorials</a> <ul class="subnav"> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> </ul> </li> <li> <a href="#">Resources</a> <ul class="subnav"> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Advertise</a></li> <li><a href="#">Submit</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> |
演示:http://blog.moocss.com/jQuery/demo21/Sexy-Drop-Down-Menu-with-CSS & jQuery/index.html
下载:http://blog.moocss.com/jQuery/demo21/Sexy-Drop-Down-Menu-with-CSS & jQuery
文章评论 已经有 0 条评论!