乌徒帮技术范儿WEB开发jQuery › jquery经典下拉菜单,做到超简洁

jquery经典下拉菜单,做到超简洁

分类:jQuery

自己撰写的jquery下拉菜单可以说是最经典的一种,根据wordpress导航菜单的结构,再适合不过,虽然之前在《基于jquery的wordpress经典下拉菜单》一文中已经有了一种方法,但感觉下拉效果很生硬,因此特地改进。

一、html部分:

<nav>
<ul id="navi">
<li><a href="#">首页</a></li>
<li><a href="#">讲坛动态</a>
<ul>
<li><a href="#">讲座预告</a></li>
<li><a href="#">活动报道</a></li>
<li><a href="#">获奖情况</a></li>
</ul>
</li>
<li><a href="#">讲坛专题</a>
<ul>
<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>
<li><a href="#">讲坛简介</a></li>
<li><a href="#">联络处之风</a></li>
</ul>
</li>
<li><a href="#">留言互动</a></li>
</ul>
</nav>

说明:本文的方法适合IE8以上浏览器,为了兼容IE6,请注意文中的一些注解。

在head中body前添加

<script type="text/javascript">
document.createElement('nav');
</script>

以支持IE6.

2、css部分

/**
* 下面是导航条
* 背景颜色:#04648D>#01435F>#204F6D line->#04648D
* 思路:导航菜单是ul>li>a联动菜单,第一级菜单是顶级菜单,我给予的总高度是40px(padding:5px 0),a高度是30px,为以后某个特定菜单制作特殊的效果添加背景图片预留了上下5px;很多效果需要用到css.js中的代码来控制。
*/
nav{
width:100%;
background:url(../images/nav.png) 0px -92px repeat-x;
_background:url(../images/nav.png) left bottom repeat-x;
}
/* 第一层的开始 */
nav > ul > li{
padding:5px 0;
width:auto;
float:left;
list-style:none;
position:relative;
}
nav > ul > li > a{
height:30px;
line-height:30px;
text-align:center;
padding:0 10px;
width:auto;
display:block;
color:#ffffff;
font-weight:bold;
text-decoration:none;
background:#04648D url(../images/nav.png) top left repeat-x;;
}
nav > ul > li.hover > a{
background:#204F6D url(../images/nav.png) 0px -31px;
}
/* 第二层的开始 */
nav li ul{
display:none;
position:absolute;
top:87.5%;
left:0;
}
nav li li{
list-style:none;
}
nav li li a{
background:#204F6D;
/* border-top:dotted #04648D 1px; */
height:30px;
line-height:30px;
text-align:center;
width:120px;
display:block;
color:#ffffff;
font-weight:bold;
text-decoration:none;
}
nav li li.hover a{
background:#01435F url(../images/nav.png) 0px -62px;
}
/**
* IE6等不支持>直接子元素选择器的浏览器可以用下面的代码来实现
*
nav li{
width:auto;
height:30px;
line-height:30px;
float:left;
list-style:none;
position:relative;
border-right:solid 1px #ffffff;
}
nav a{
color:#ffffff;
text-decoration:none;
display:block;
text-align:center;
font-weight:bold;
width:auto;
padding:0 10px;
}
nav li:hover,nav li a:hover,
nav li.hover{
background:#204F6D;
}
nav li ul{
display:none;
position:absolute;
top:100%;
left:0;
background:#204F6D;
}
/**
* 不使用JS下拉的时候,可以使用下面这段来实现下拉
nav li:hover ul,
nav li.hover ul{
display:block;
}
***
nav li li{
float:none;
border-top:dotted #04648D 1px;
border-right:none;
width:120px;
height:30px;
overflow:hidden;
}
nav li li a{
height:30px;
}
nav li li:hover,nav li li a:hover{
background:#01435F;
}
*/

代码中做了注解,请使用者自行判断舍弃还是使用。

3、js脚本部分

首先确保你已经加载了jquery库,然后使用下面代码

$(document).ready(function(){
//下拉菜单
var $timer;
$('nav li').hover(function(){
$(this).addClass('hover');
var $submenu = $(this).find('ul');
$timer = setTimeout(function(){
$submenu.slideDown(300);
},300);
},function(){
clearTimeout($timer);
var $hover = $(this);
var $hover_ul = $(this).find('ul');
$hover_ul.slideUp(200);
if($hover_ul.is(':visible'))
setTimeout(function(){
$hover.removeClass('hover');
},300);
else $hover.removeClass('hover');
});
//有下拉菜单的导航选项添加有下级菜单的提示
$('nav li:has(ul) > a').append(' &raquo;');
});

已有2条评论 快速评论
  1. frustigor #810楼 回复给@809楼 2012/03/05 09:51:43 回复

    没有测试过IE9,可能CSS部分有问题吧

  2. cobee #809楼 2012/03/05 01:57:42 回复

    效果蛮好,但为什么在IE9里面显示不出来下拉菜单

填写个人信息,赶快回复吧!