js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS常用代码 > 导航菜单

jquery实现垂直多级导航菜单展开收缩特效

发布时间:2015-09-08 23:52:42    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jquery实现垂直多级导航菜单展开收缩特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
	<head>    
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
		<title>jquery实现垂直多级导航菜单展开收缩特效</title>    
		<meta name="keywords" content="jquery特效,导航菜单,展开收缩,收缩菜单,垂直导航菜单" />    
		<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>    
		<script type="text/javascript" src="js/menu_min.js"></script>    
		<script type="text/javascript">    
			$(document).ready(function (){    
				$(".menu ul li").menu();    
			});    
		</script>     
		<link rel="stylesheet" type="text/css" href="css/base.css">     
		<link rel="stylesheet" type="text/css" href="css/menu.css">    
	</head>    
	<body>     
		<div class="menu">    
			<ul>    
				<li><a class="active" href="#">Item 1</a>    
					<ul style="display: block;">    
						<li><a href="#">Subitem 1</a></li>    
						<li><a href="#">Subitem 2</a>    
							<ul>    
								<li><a href="#">Subitem 1</a></li>    
								<li><a href="#">Subitem 2</a></li>    
								<li><a href="#">Subitem 3</a></li>    
								<li><a href="#">Subitem 4</a></li>    
							</ul>    
						</li>    
						<li><a href="#">Subitem 3</a></li>    
						<li><a href="#">Subitem 4</a>    
							<ul>    
								<li><a href="#">Subitem 1</a></li>    
								<li><a href="#">Subitem 2</a></li>    
							</ul>    
						</li>    
						<li><a href="#">Subitem 5</a></li>    
					</ul>    
				</li>    
				<li><a href="#">Item 2</a>    
					<ul>    
						<li><a href="#">Subitem 1</a></li>    
						<li><a href="#">Subitem 2</a></li>    
						<li><a href="#">Subitem 3</a></li>    
						<li><a href="#">Subitem 4</a></li>    
					</ul>    
				</li>    
				<li><a href="#">Item 3</a>    
					<ul>    
						<li><a href="#">Subitem 1</a></li>    
						<li><a href="#">Subitem 2</a></li>    
						<li><a href="#">Subitem 3</a></li>    
						<li><a href="#">Subitem 4</a></li>    
						<li><a href="#">Subitem 5</a></li>    
						<li><a href="#">Subitem 6</a></li>    
					</ul>    
				</li>    
				<li><a href="#">Item without subitems</a></li>    
				<li><a href="#">Item without subitems</a></li>    
			</ul>    
		</div>    
	</body>    
</html>



导航菜单

jQuery左侧分类导航特效_jquery商城左侧分类菜单导航_橙色导航菜单特效代码

仿美图秀秀官网,纯CSS二级下拉导航菜单特效

jquery顶部导航菜单下拉,左侧分类切换特效

jQuery仿腾讯云全屏下拉导航菜单特效代码

jquery实现顶部固定、二级栏目之间相互滑动的导航菜单特效

jquery仿海信官网带缩略图下拉导航菜单特效

jquery仿天猫左侧导航菜单分类列表

js实现竖直收缩导航菜单,点击展开折叠菜单特效

jquery导航菜单可拖动特效

jquery实现新闻门户网站二级导航菜单特效

jquery实现中英文字切换导航条,鼠标悬停滑动下拉二级导航菜单

jquery仿马可波罗左侧商品列表导航菜单特效

jquery仿京东商城左侧商品分类导航菜单样式特效_模仿京东二级导航栏_商品分类代码

jquery实现鼠标滚动的时候,导航菜单大小可自动调整的特效

kissy仿阿里云滑动下拉导航菜单特效

jQuery黑色竖直多级导航菜单特效

jquery实现左侧导航菜单滚动特效

jquery仿天猫分类导航通栏底部banner切换代码_jquery仿天猫商城左侧商品分类导航菜单样式特效_模仿天猫二级导航栏

jquery实现垂直多级导航菜单展开收缩特效

CSS实现导航菜单下拉特效代码