jQuery左导航菜单二级菜单slide滑动渐隐显示-20130706 -

xjwolaile

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

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery左导航菜单二级菜单slide滑动渐隐显示-20130706

博客分类：

学习
jQuery
前端技术

each addClass removeClass ready dropMenu

1、效果及功能说明
导航菜单制作一个二级菜单导航条，鼠标滑过导航条二级菜单slide滑动展示且带有渐隐效果展示比较柔和的二级菜单目录

2、实现原理

先通过遍历匹配到每一个元素，这个是为了让所有的导航栏都可以获得显出相对因下拉框的效果，定义一个伪类事件让鼠标触及到导航栏后触发相对因的下拉框在给下拉框一个类这个类定义好了下拉框的样式，下拉框的出现是同意一个动画的效果来实现，时间为0.4秒内完成然后在定义一个方法在鼠标移开导航栏后下拉框在就直接清楚jquery给的类让下拉框消失这个也是一个动画效果来完成时间为0.3秒

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导航菜单二级菜单slide滑动渐隐显示</title>
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover{color:#333;text-decoration:underline;}
body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}
/* navbox */
.navbox,.nav li,.nav li.current a,.nav li.selected a span,.nav li a.selected,.nav li a.selected span{background:url(images/headerbg.png) no-repeat;}
.navbox{height:39px;background-position:0 -138px;background-repeat:repeat-x;position:relative;z-index:9;}
.nav{width:960px;margin:0 auto;}
.nav li{float:left;height:39px;background-position:100% -99px;padding:0 3px 0 2px;position:relative;}
.nav li.last{background:none;}
.nav li a{float:left;display:block;padding:0 0 0 4px;height:39px;overflow:hidden;}
.nav li a span{float:left;display:block;padding:0 4px 0 0;line-height:39px;font-size:14px;color:#fff;font-weight:800;cursor:pointer;width:142px;text-align:center;}
.nav li.selected a,.nav li a.selected{background-position:0 -60px;text-decoration:none;}
.nav li.selected a span,.nav li a.selected span{background-position:100% -60px;color:#ff7e00;}
.nav li.selected .submenu{display:block;}
.nav li .submenu{display:none;position:absolute;top:39px;left:6px;}
.nav li .submenu{border-style:solid;border-width:0px 1px 1px 1px;border-color:#ddd;padding:0 5px 5px 5px;width:132px;background:#fff;}
.nav li .submenu{-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-moz-box-shadow:0 5px 5px #D3D3D3;-webkit-box-shadow:0 5px 5px #D3D3D3;box-shadow:0 5px 5px #D3D3D3;}
.nav li .submenu li{float:none;padding:0;background:none;height:auto;border-bottom:dotted 1px #BEBEBE;}
.nav li .submenu li.last{border:none;}
.nav li .submenu li a{float:none;padding:0;text-align:center;height:28px;line-height:28px;background:none;}
.nav li .submenu li a:hover{background:#ddd;font-weight:800;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function dropMenu(obj){
//定义方法
	$(obj).each(function(){
	//定义遍历方法匹配到每一个元素
		var theSpan = $(this);
		//定于参数
		var theMenu = theSpan.find(".submenu");
		//定义参数获得样式
		var tarHeight = theMenu.height();
		//定义参数获得高度
		theMenu.css({height:0,opacity:0});
		//定义theMenu里面的高度和元素的透明度
		theSpan.hover(
		//theSpan调用伪类
			function(){
			//定义方法
				$(this).addClass("selected");
				//通过jquery 添加一个类
				theMenu.stop().show().animate({height:tarHeight,opacity:1},400);
				//控制鼠标触及到导航栏后开启下拉框的动画效果 和透明度和整个动画的时间为0.4秒完成
			},
			function(){
			//定义方法
				$(this).removeClass("selected");
				//在jquery定义一个移除类
				theMenu.stop().animate({height:0,opacity:0},400,function(){
				//当鼠标移开导航栏的时候下拉框就消失修改下拉框的透明度和整个动画消失动画的时间为0.4秒 然后在这上面在定义个方法
									$(this).css({display:"none"});
									//将鼠标移开以后下拉框不出现出来
				});
			}
		);
	});
}

$(document).ready(function(){
//在页面加载完成以后激活所有函数
	dropMenu(".drop-menu-effect");
	//将dropMenu方法放到每个.drop-menu-effect类里在来让所有的导航栏实现这个方法

});
</script> 


<div class="navbox">
	<div class="nav">
		<ul class="clearfix">
			<li><a class="selected" target="_blank" href="http://www.17sucai.com/"><span>网站首页</span></a></li>
			<li class="drop-menu-effect">
				<a target="_blank" href="http://www.17sucai.com/"><span>jquery代码</span></a>
				<ul class="submenu">
					<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>
			</li>
			<li class="drop-menu-effect">
				<a target="_blank" href="http://www.17sucai.com/"><span>jquery图片特效</span></a>	
				<ul class="submenu">
					<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>
			</li>
			<li class="drop-menu-effect">
				<a target="_blank" href="http://www.17sucai.com/"><span>jquery导航菜单</span></a>	
				<ul class="submenu">
					<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>
			</li>
			<li class="drop-menu-effect">
				<a target="_blank" href="http://www.17sucai.com/"><span>jquery选项卡特效</span></a>
				<ul class="submenu">
					<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>
			</li>
			<li class="drop-menu-effect">
				<a target="_blank" href="http://www.17sucai.com/"><span>jquery文字特效</span></a>	
				<ul class="submenu">
					<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>
			</li>
		</ul>
	</div>
</div>

</body>
</html>

images.rar (769 Bytes)
下载次数: 3

查看图片附件

分享到：

jQuery导航菜单插件制作常用的jquery 二 ... | jQuery左侧列表导航条鼠标滑过flash动画导 ...

2013-07-07 00:44
浏览 1477
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery左导航菜单二级菜单slide滑动渐隐显示-20130706

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery左导航菜单二级菜单slide滑动渐隐显示-20130706

评论

发表评论

相关推荐

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

最近访客更多访客>>