最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

jquery导航菜单二级下拉菜单slide滑动渐隐显示

来源:http://www.erdangjiade.com/js/1120.html 二当家的 2017-02-08 17:51浏览(811)

jquery导航菜单二级下拉菜单slide滑动渐隐显示实现源码

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

jquery导航菜单二级下拉菜单slide滑动渐隐显示
分类:导航菜单 > 下拉导航 难易:
查看演示 下载资源: 12

关注微信号获取此Demo视频教程:

下载资源 下载积分: 10 积分
<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});
		theSpan.hover(
			function(){
				$(this).addClass("selected");
				theMenu.stop().show().animate({height:tarHeight,opacity:1},400);
			},
			function(){
				$(this).removeClass("selected");
				theMenu.stop().animate({height:0,opacity:0},400,function(){
					$(this).css({display:"none"});
				});
			}
		);
	});
}

$(document).ready(function(){
	
	dropMenu(".drop-menu-effect");

});
</script>
<div class="navbox">
	<div class="nav">
		<ul class="clearfix">
			<li><a class="selected" target="_blank" href="http://www.erdangjiade.com/"><span>网站首页</span></a></li>
			<li class="drop-menu-effect">
				<a target="_blank" href="http://www.erdangjiade.com/"><span>jquery代码</span></a>
				<ul class="submenu">
					<li><a href="http://www.erdangjiade.com/">jquery图片特效</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery导航菜单</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery选项卡特效</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery文字特效</a></li>
				</ul>
			</li>
			<li class="drop-menu-effect">
				<a target="_blank" href="http://www.erdangjiade.com/"><span>jquery图片特效</span></a>	
				<ul class="submenu">
					<li><a href="http://www.erdangjiade.com/">jquery图片切换</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery幻灯片</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery图片滚动</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery图片放大镜</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery广告</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery更多特效</a></li>
				</ul>
			</li>
			<li class="drop-menu-effect">
				<a target="_blank" href="http://www.erdangjiade.com/"><span>jquery导航菜单</span></a>	
				<ul class="submenu">
					<li><a href="http://www.erdangjiade.com/">jquery动画菜单</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery树形菜单</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery下拉菜单</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery右键菜单</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery更多特效</a></li>
				</ul>
			</li>
			<li class="drop-menu-effect">
				<a target="_blank" href="http://www.erdangjiade.com/"><span>jquery选项卡特效</span></a>
				<ul class="submenu">
					<li><a href="http://www.erdangjiade.com/">jquery选项卡切换</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery滑动选项卡</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery更多特效</a></li>
				</ul>
			</li>
			<li class="drop-menu-effect">
				<a target="_blank" href="http://www.erdangjiade.com/"><span>jquery文字特效</span></a>	
				<ul class="submenu">
					<li><a href="http://www.erdangjiade.com/">jquery文字滚动</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery文字闪烁</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery文字切换</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery文字数量</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery文字改变</a></li>
					<li><a href="http://www.erdangjiade.com/">jquery更多特效</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/1120.html
评论0
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

1 2