欢迎来到六久阁织梦模板网!
您的位置: 主页 > 网页特效 > 导航菜单 >

jquery css3平滑的淡出淡进导航菜单特效演示图:

jquery css3平滑的淡出淡进导航菜单特效

代码:


<div class="container">
	<ul id="topnav">
		<li><a href="http://www.lol9.cn/" class="home">Home</a></li>
		<li>
			<a href="http://www.lol9.cn/" class="products">Products</a>
			<div class="sub">
				<ul>
					<li><h2><a href="http://www.zcool.com.cn/">六久阁</a></h2></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
				</ul>
				<ul>
					<li><h2><a href="http://www.zcool.com.cn/works/">原创作品</a></h2></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
				</ul>
				<ul>
					<li><h2><a href="http://www.lol9.cn/">Accessories</a></h2></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
				</ul>
				<ul>
					<li><h2><a href="http://www.lol9.cn/">Accessories</a></h2></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
				</ul>
			</div>
		</li>
		<li>
			<a href="http://www.lol9.cn/" class="sale">Sale</a>
			<div class="sub">
				<div class="row">
					<ul style="width:225px;">
						<li><h2><a href="http://www.lol9.cn/">Deal of the Week</a></h2></li>
						<li><a href="http://www.lol9.cn/">Navigation Link - 2 Column</a></li>
						<li><a href="http://www.lol9.cn/">Navigation Link - 2 Column</a></li>
						<li><a href="http://www.lol9.cn/">Navigation Link - 2 Column</a></li>
						<li><a href="http://www.lol9.cn/">Navigation Link - 2 Column</a></li>
					</ul>
					<ul style="width:225px;">
						<li><h2><a href="http://www.lol9.cn/">Clearance Items</a></h2></li>
						<li><a href="http://www.lol9.cn/">Navigation Link - 2 Column</a></li>
						<li><a href="http://www.lol9.cn/">Navigation Link - 2 Column</a></li>
						<li><a href="http://www.lol9.cn/">Navigation Link - 2 Column</a></li>
						<li><a href="http://www.lol9.cn/">Navigation Link - 2 Column</a></li>
					</ul>
				</div>
				<div class="row">
					<ul>
						<li><h2><a href="http://www.lol9.cn/">Deal of the Week</a></h2></li>
						<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
						<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
						<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
						<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					</ul>
					<ul>
						<li><h2><a href="http://www.lol9.cn/">Clearance Items</a></h2></li>
						<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
						<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
						<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
						<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					</ul>
					<ul>
						<li><h2><a href="http://www.lol9.cn/">Open Box Items</a></h2></li>
						<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
						<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
						<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
						<li><a href="http://www.lol9.cn/">Navigation Link</a></li>
					</ul>
				</div>
			</div>
		</li>
		<li><a href="http://www.lol9.cn/" class="community">Community</a></li>
		<li><a href="http://www.lol9.cn/" class="store">Store Locator</a></li>
	</ul>
</div>


隐藏侧边栏导航菜单特效
« 上一篇 2017年06月25日
这是最后一篇
下一篇 »
有问题在这里提问,阁主会为你解决!
  • 全部评论(0
    还没有评论,快来抢沙发吧!