jQuery水平子导航菜单

这是一个简单的导航与水平子导航。在大多数情况下,我们可以用CSS实现这种效果纯粹,但自从我们去红孩子步即IE6,我们将用几行jQuery来覆盖所有。

线框- HTML

巢一组链接< span >标记内的包裹,这是如何定位子导航。
<ul id="topnav">
    <li><a href="#">Link</a></li>
    <li>
        <a href="#">Link</a>
        <!--Subnav Starts Here-->
        <span>
            <a href="#">Subnav Link</a> |
            <a href="#">Subnav Link</a> |
            <a href="#">Subnav Link</a>
        </span>
        <!--Subnav Ends Here-->
    </li>
    <li><a href="#">Link</a></li>
</ul>

CSS样式,

与常规的下拉菜单,子导航直接出现在徘徊/点击列表项,在这种情况下的所有子导航集将开始在同一位置(左对齐-导航下面)。

ul#topnav {
 margin: 0; padding: 0;
 float: left;
 width: 970px;
 list-style: none;
 position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
 font-size: 1.2em;
 background: url(topnav_stretch.gif) repeat-x;
}
ul#topnav li {
 float: left;
 margin: 0; padding: 0;
 border-right: 1px solid #555; /*--Divider for each parent level links--*/
}
ul#topnav li a {
 padding: 10px 15px;
 display: block;
 color: #f0f0f0;
 text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }

现在设置< span >标记上的绝对定位35 px从顶部。我添加了一些底部圆角风格(这不会工作在IE)。
ul#topnav li span {
 float: left;
 padding: 15px 0;
 position: absolute;
 left: 0; top:35px;
 display: none; /*--Hide by default--*/
 width: 970px;
 background: #1376c9;
 color: #fff;
 /*--Bottom right rounded corner--*/
 -moz-border-radius-bottomright: 5px;
 -khtml-border-radius-bottomright: 5px;
 -webkit-border-bottom-right-radius: 5px;
 /*--Bottom left rounded corner--*/
 -moz-border-radius-bottomleft: 5px;
 -khtml-border-radius-bottomleft: 5px;
 -webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#topnav li span a { display: inline; } /*--Since we d a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover {text-decoration: underline;}

下面的脚本包含注释解释jQuery行动正在进行。
<script type="text/javascript">
$(document).ready(function() {
 
 $("ul#topnav li").hover(function() { //Hover over event on list item
  $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
  $(this).find("span").show(); //Show the subnav
 } , function() { //on hover out...
  $(this).css({ 'background' : 'none'}); //Ditch the background
  $(this).find("span").hide(); //Hide the subnav
 });
 
});
</script>

好又简单!希望这将在你未来的项目派上用场。