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

一个jQuery下拉菜单

时间：2010-05-13

来源：互联网

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

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

html：

复制内容到剪贴板

代码:

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”);
})
})

更多jQuery实例请去大前端

[ 本帖最后由 race 于 2010-5-13 17:53 编辑 ]

作者: race 发布时间: 2010-05-13

这个是不是也该发上来一下.....
<script type="text/javascript" src="script/jquery142min.js"></script>

[ 本帖最后由 hj1227 于 2010-5-13 13:33 编辑 ]

作者: hj1227 发布时间: 2010-05-13

随便引用一个jQuery就行了要不怎么说是jQ实例呢呵呵

作者: race 发布时间: 2010-05-13

哎没人看吗

作者: race 发布时间: 2010-05-13

我顶

作者: race 发布时间: 2010-05-13

鼠标经过时右边有1px的白色间隔

作者: ruobilin 发布时间: 2010-05-13

鼠标经过时右边有1px的白色间隔已修复！

作者: race 发布时间: 2010-05-13

具体的美化大家可以细调有问题我会及时解决的

作者: race 发布时间: 2010-05-13

还是比较喜欢JS版的....

作者: hj1227 发布时间: 2010-05-13

复制了一下一点效果都没 - - IE6。。蛋疼求运行实例版!

作者: cwq2jxl 发布时间: 2010-05-13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style> .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} </style> <script src="styles/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(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"); }) }) </script> </HEAD> <BODY> <div><em>下拉菜单</em></div> </BODY> </HTML>
提示：您可以先修改部分代码再运行

复制你的代码运行怎么没效果？LZ来看看我发的代码看看哪里不对~~~

作者: cwq2jxl 发布时间: 2010-05-13

1.LZ页面还有个link CSS连接没套上.... （已经不存在了）
2.JS也没套上（已经不存在了）
3.

你的页面是什么编码？？？？？？

作者: hj1227 发布时间: 2010-05-13

你那个连jQuery都没引用

作者: race 发布时间: 2010-05-13

如果你的页面中用了jQuery 你还会用大量的js写一些简单的效果吗呵呵还是那句话各取所需嘛

作者: race 发布时间: 2010-05-13

从来不用jquery ，一直手写。

作者: shw3588 发布时间: 2010-05-13

向你学习