jQuery驴妈妈旅游网导航扁平特效代码



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

56 220 74



特效描述:jQuery 驴妈妈旅游网 导航扁平。jQuery驴妈妈旅游网导航扁平特效代码

代码结构

1. 引入JS

<script src="js/jquery.min.js"></script>

2. HTML代码

<div class="header-nav">
	<div class="contain">
		<ul class="nav-list">
			<li>
				<a href="#">首页<span class="trig"></span></a>
			</li>
			<li>
				<a href="#">出境游<span class="trig"></span></a>
				<ul>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">当地玩乐</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">游轮</a></li>
					<li><a href="#">出境首页</a></li>
				</ul>
			</li>
			<li>
				<a href="#">国内游<span class="trig"></span></a>
				<ul>
					<li><a href="#">国内长途</a></li>
					<li><a href="#">周边跟团</a></li>
					<li><a href="#">周边跟团</a></li>
					<li><a href="#">周边跟团</a></li>
					<li><a href="#">周边跟团</a></li>
					<li><a href="#">周边跟团</a></li>
					<li><a href="#">周边跟团</a></li>
					<li><a href="#">周边跟团</a></li>
					<li><a href="#">周边跟团</a></li>
					<li><a href="#">自驾游</a></li>
					<li><a href="#">亲子游</a></li>
					<li><a href="#">酒店</a></li>
				</ul>
			</li>
			<li>
				<a href="#">出境游11<span class="trig"></span></a>
				<ul>
					<li><a href="#">出境首页1</a></li>
					<li><a href="#">游轮111</a></li>
					<li><a href="#">出境首页</a></li>
				</ul>
			</li>
			<li>
				<a href="#">出境游002<span class="trig"></span></a>
				<ul>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">当地玩乐</a></li>
				</ul>
			</li>
			<li>
				<a href="#">出境游003<span class="trig"></span></a>
				<ul>
					<li><a href="#">游轮112</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境002</a></li>
				</ul>
			</li>
			<li>
				<a href="#">出境游002<span class="trig"></span></a>
				<ul>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">当地玩乐</a></li>
				</ul>
			</li>
			<li>
				<a href="#">出境游003<span class="trig"></span></a>
				<ul>
					<li><a href="#">游轮112</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境002</a></li>
				</ul>
			</li>
			<li>
				<a href="#">出境游11<span class="trig"></span></a>
				<ul>
					<li><a href="#">出境首页1</a></li>
					<li><a href="#">游轮111</a></li>
					<li><a href="#">游轮111</a></li>
					<li><a href="#">游轮111</a></li>
					<li><a href="#">游轮111</a></li>
					<li><a href="#">游轮111</a></li>
					<li><a href="#">游轮111</a></li>
					<li><a href="#">出境首页</a></li>
				</ul>
			</li>
			<li>
				<a href="#">出境游002<span class="trig"></span></a>
				<ul>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">当地玩乐</a></li>
					<li><a href="#">当地玩乐</a></li>
					<li><a href="#">当地玩乐</a></li>
					<li><a href="#">当地玩乐</a></li>
				</ul>
			</li>
		</ul>
	</div>
	<div class="second-bg"></div>
</div>
<script>
	$(function(){
		$('.nav-list>li').hover(function(){
			var $ul=$(this).find('ul');
			var oW=$(this).width();//li
			var otrigW=$(this).find('.trig').width();
			var oNavListL=$('.nav-list').offset().left;
			var oTL=$(this).offset().left-oNavListL;//距离最左边的距离
			var oTR=$('.nav-list').width()-oTL-oW;//距离最右边的距离
			console.log(oNavListL+":"+oTL);
			if($ul.find('li').length>0){
				$('.second-bg').show();
				$(this).find('.trig').show();
				$ul.show();
				var sum=0;
				var oLeft=0;
				for(var i=0;i<$ul.find('li').length;i++){
					sum+=$ul.find('li').eq(i).width()+4;
				}
				$ul.width(sum);
				oLeft=(sum-oW)/2;
				if(oLeft>oTL){//到达左侧边界
					oLeft=oTL;
					$ul.css('left',-oLeft+'px');
					return ;
				}
				if(oLeft>oTR){
					$ul.css('right',-oTR+'px');
					return ;
				}
				$ul.css('left',-oLeft+'px');
			}
		},function(){
			$('.second-bg').hide();
			$(this).find('ul').hide();
			$(this).find('.trig').hide();
		});
	});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 收缩导航菜单 二级导航菜单 文字收缩展开 下拉导航菜单 图片收缩展开 竖直导航菜单 图标导航菜单 固定导航菜单 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 收缩收起展开 导航菜单导航条

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到