当前位置：首页 → 问答吧 → 一个jQuery下拉菜单

一个jQuery下拉菜单

时间：2010-05-13

来源：互联网

想必大家见过也写过不少关于下拉菜单的例子，小弟这是献丑了，各取所需吧！
当web前端开发正值jQuery风靡的时候，各大网站都掀起了使用jQuery的风潮。原因在于其简单小巧，插件极其丰富，更重要的是它有一大批前端开发的爱好者。好了，不扯淡了，发个jQ写的下拉菜单玩玩！

大家还是先看下demo吧：http://www.daqianduan.com/demo/dropmenu.html

html：

复制代码

<div><em>下拉菜单</em></div>

css：

复制代码

.dropmenu{ position:relative; width:80px; margin:10px 0;}
.dropmenu em{ border:#fff 1px solid;height:20px; line-height:20px;width:50px; display:block; padding:0 8px;}
.dropmenu em.on{ border:#ccc 1px solid;}
.dropmenu span{ position:absolute; top:21px; left:0;border:#ccc 1px solid; border-top:#fff 1px solid; padding:5px 8px; width:50px;}
.dropmenu span a{ display:block; height:20px; line-height:20px}

js：

复制代码

$(function(){
$(“.dropmenu em”).hover(function(){
if($(this).siblings().length==0){
$(this).parent().append(“<span><a>栏目001</a><a>栏目002</a><a>栏目003</a><a>栏目004</a></span>”);
} else{
$(this).siblings().slideDown();
}
}).parent().hover(function(){
$(this).find(“em”).addClass(“on”);
},function(){
$(this).find(“span”).slideUp(200);
$(this).find(“em”).removeClass(“on”);
})
})