jQuery导航菜单插件制作常用的jquery 二级下拉菜单子内容-20130707 -

xjwolaile

浏览: 340486 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery导航菜单插件制作常用的jquery 二级下拉菜单子内容-20130707

博客分类：

前端技术
学习
jQuery

1、效果及功能说明
导航菜单插件制作当鼠标滑过显示二级下拉菜单目录子内容，这是一款轻量级的jquery菜单插件非常实用

2、实现原理

首先这个是一个个体的下拉框的效果实现，首先要定义出两个伪类来第一个是在鼠标触及到外面的a标签以后触发一个伪类这个伪类的方法里面包含有显示出下拉框的方法然后当鼠标移开外面的a标签时将会触发第二个伪类方法里面的删除类的方法，这样就实现了一个下拉框的展现和隐藏。

3、效果图

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果就可实现看下图可做参考

7、代码[html5]

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery导航菜单插件制作常用的jquery 二级下拉菜单子内容</title>
</head>

<body>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
(function(a){
//定义方法带a参数
	a.fn.hoverClass=function(b){
	//通过a参数调用伪类定义一个方法里面带b参数
		var a=this;
		//定义参数
		a.each(function(c){
		//a调用遍历定义方法带c参数
			a.eq(c).hover(function(){
			//a调用eq方法将匹配元素集缩减值指定元素c上的一个调用一个伪类定义方法
				$(this).addClass(b)
				//指定通过jquery添加一个b类
			},function(){
			//定义方法
				$(this).removeClass(b)
				//当鼠标移开目标后在删除b类
			})
		});
		return a
		//返回a
	};
})(jQuery);

$(function(){
//定义一个方法
	$("#navbox").hoverClass("current");
	//是的#navbox的ID调用伪类的函数返回仅包含当前节点的节点集
	
});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#333;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
body{font:12px/180% "宋体";}
/* menu */
.menu{height:26px;width:110px;margin:20px auto;background:#fff;position:relative;}
.menu a{display:block;height:24px;line-height:24px;padding:0 0 0 10px;border:solid 1px #ddd;}
.menu a.tit{background:url(images/arrow.gif) no-repeat;background-position:94px 9px;}
#navbox.current a.tit{background-position:94px -15px;color:#3366cc;font-weight:800;border-bottom:solid 1px #fff;position:relative;z-index:9;}
.menu .subnav{display:none;background:#fff;position:absolute;top:25px;left:0px;width:140px;border-style:solid;border-color:#ddd;border-width:1px;}
#navbox.current .subnav{display:block;}
.menu .subnav a{border:none;}
.menu .subnav a:hover{background:#eee;border-left:solid 1px #fff;border-right:solid 1px #fff;font-weight:800;}
</style>

<div id="navbox" class="menu">
	<a class="tit" href="http://www.17sucai.com/">jquery特效</a>
	<ul class="subnav">
		<li><a href="http://www.17sucai.com/">jquery图片特效</a></li>
		<li><a href="http://www.17sucai.com/">jquery导航菜单</a></li>
		<li><a href="http://www.17sucai.com/">jquery选项卡特效</a></li>
		<li><a href="http://www.17sucai.com/">jquery文字特效</a></li>
		<li><a href="http://www.17sucai.com/">jquery表单特效</a></li>
		<li><a href="http://www.17sucai.com/">jquery表格特效</a></li>
	</ul>
</div><!--navbox end-->

</body>
</html>

images.rar (195 Bytes)
下载次数: 2

查看图片附件

分享到：

jQuery无缝滚动插件支持图片无缝滚动或文字 ... | jQuery左导航菜单二级菜单slide滑动渐隐显 ...

2013-07-07 23:29
浏览 414
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery导航菜单插件制作常用的jquery 二级下拉菜单子内容-20130707

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery导航菜单插件制作常用的jquery 二级下拉菜单子内容-20130707

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>