jquery缓冲下拉导航菜单

浏览数：50 / 时间：2015年06月09日

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" type="text/css" href="css/zzsc.css" media="all" />
<title>jquery缓冲下拉导航菜单特效</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js" ></script>
</head>
<body>

        <div class="examples_body">
            <ul class="topnav">
                <li><a href="#">下拉菜单</a></li>
                <li>
                <a href="#">下拉菜单一号</a>
                <ul class="subnav">
                <li><a href="#">下拉菜单下拉菜单内容</a></li>
                <li><a href="#">下拉菜单下拉菜单内容</a></li>
                </ul>
                </li>
                <li>
                <a href="#">下拉菜单二号</a>
                <ul class="subnav">
                <li><a href="#">下拉菜单下拉菜单内容</a></li>
                <li><a href="#">下拉菜单下拉菜单内容</a></li>
                <li><a href="#">下拉菜单下拉菜单内容</a></li>
                <li><a href="#">下拉菜单下拉菜单内容</a></li>
                <li><a href="#">下拉菜单下拉菜单内容</a></li>
                </ul>
                </li>
                <li><a href="#">下拉菜单三号</a>
                <ul class="subnav">
                <li><a href="#">下拉菜单下拉菜单内容</a></li>
                <li><a href="#">下拉菜单下拉菜单内容</a></li>
                <li><a href="#">下拉菜单下拉菜单内容</a></li>
                </ul>
                </li>
                <li><a href="#">下拉菜单四号</a></li>
                <li><a href="#">下拉菜单五号</a></li>
                
            </ul>
        </div>
        <div class="clear"></div>
<div style="text-align:center;margin:40px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>

css:

body,ul{margin:0px; padding:0px;}
body{font-size:12px;}
.clear{clear:both}
div.examples_body {
     width: 750px;
     margin: 50px auto;
     
}
ul.topnav {
    width: 710px;
    
    float: left;
    background: #222;
    background: url(../images/topnav_bg.gif) repeat-x;
}
ul.topnav li {
    float: left;
    margin: 0;
    padding: 0 10px 0 15px;
    position: relative;
    display: inline;
}
ul.topnav li a { 
    padding: 10px 5px;
    color: #fff;
    display: block;
    text-decoration: none;
    float: left;
}
ul.topnav li span { 
    width: 17px;
    height: 35px;
    float: left;
    background: url(../images/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover { 
    background-position: center bottom; cursor: pointer;
}   
ul.topnav li ul.subnav {
    width: 170px;
    position: absolute; 
    left: 0; top: 35px;
    background: #333;
    margin: 0; padding: 0;
    display: none;
    float: left;
    border: 1px solid #111;
}
ul.topnav li ul.subnav li{
    width: 170px;
    margin: 0; padding: 0;
    border-top: 1px solid #252525; 
    border-bottom: 1px solid #444; 
    clear: both;
}
html ul.topnav li ul.subnav li a {
    width: 145px;
    float: left;
    background-color: #333;
    padding-left: 20px;
    font-size: 0.9em;
}
html ul.topnav li ul.subnav li a:hover { 
    background-color: #222;
}

js:

$(document).ready(function(){   
  
    $("ul.subnav").parent().append("<span></span>");  
  
    $("ul.topnav li span").mouseover(function() { 
        
        $(this).parent().find("ul.subnav").slideDown(‘fast‘);
  
        $(this).parent().hover(function() {   
        }, function(){   
            $(this).parent().find("ul.subnav").slideUp(‘slow‘); 
        });      
        }).hover(function() {   
            $(this).addClass("subhover"); 
        }, function(){ 
            $(this).removeClass("subhover"); 
    });   
  
});