AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

比较简单实现的jQuery下拉菜单

分类：洁具标志作者：编程之家

想必大家见过也写过不少关于下拉菜单的例子，小弟这是献丑了，各取所需吧！

当web前端开发正值jQuery风靡的时候，各大网站都掀起了使用jQuery的风潮。原因在于其简单小巧，插件极其丰富，更重要的是它有一大批前端开发的爱好者。好了，不扯淡了，发个jQ写的下拉菜单玩玩！

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:0; padding:5px 8px; width:50px;}
.dropmenu span a{ display:block; height:20px; line-height:20px}

html代码

下拉菜单

jquery脚本

// 下拉菜单
$(function(){
	$(".dropmenu em").hover(function(){
		if($(this).siblings().length==0){
			$(this).parent().append("栏目001栏目002栏目003栏目004");
		} else{
			$(this).siblings().slideDown();
		}
	}).parent().hover(function(){
			$(this).find("em").addClass("on");
		},function(){
			$(this).find("span").slideUp(200);
			$(this).find("em").removeClass("on");
	})
})

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

JQuery获取和设置Select选项
分享一篇关于JQuery获取和设置Select选项的方法。希望对你有所帮助~ 获取Select： 
在一个table中动态添加一行或删除一行
如何在一个table中动态添加一行或删除一行的代码分享！<table id="selected_user_table" width="100%" >
最全的jQuery选择器全集详解
选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery代码的效率。
比较简单实现的jQuery下拉菜单
想必大家见过也写过不少关于下拉菜单的例子，小弟这是献丑了，各取所需吧！
jQuery中10个非常有用的遍历函数
使用jQuery，可以很容易的选择HTML元素。但有些时候，在HTML结构较为复杂时，提炼我们选择的元素就是一件麻烦的事情。在这篇教程中，我们将探讨十种方法去精炼和扩展我们将要操作的集合。
漂亮的jQuery焦点图代码分享
三张焦点图切换的jquery代码分享，方便你做网站焦点图使用； tips：使用之前记得引用jquery包～
如何用jQuery实现模块拖拽的方法
这是模块拖拽Javascript代码$(function() {     var _move = false; //移动标记
DD_belatedPNG解决IE6下PNG不透明问题
众所周知IE6不支持透明的PNG图片,而PNG图片在Web设计方面表现力上，具有其它图形格式所达不到的效果，IE6这一致命缺陷极大地限制了Web设计的创意发挥。虽然解决IE6的透明PNG的方法也很多,从使用IE特有的滤镜或是e­x
如何让2个并列的div根据内容自动保持同等高度
最近在工作中碰到一个需求： 有左右2个并列的div，2个div都不能限定高度。左div为导航，右div为内容。如何能让左div块自动获得和右div块相等的高度？
jQuery 随滚动条滚动效果 固定版
前几天写的《jQuery随滚动条滚动效果（适用于内容页长文章）》，有几个同学说右侧固定比较好，所以今天就写了个随动固定版。相信一定能解决大部分人的需求！