当前位置：首页 > 网页特效 > 导航菜单 >

jQuery两级菜单代码

时间：2013-04-01 21:25 来源：互联网作者：源码搜藏收藏推荐

<title>jQuery两级菜单代码</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
type="text/javascript">
</script>
<script type=text/javascript>
	function menuInit() {
		var navItems = $(".nav > ul > li");
		navItems.each(function(index) {
			$(this).bind({
				mousemove: function() {
					if ($(this).find("ul").length > 0) {
						hideUL(navItems);
						$(this).find("ul").show();
					}
				}
			});
		});
	}
	function hideUL(navItems) {
		navItems.each(function(index) {
			$(this).find("ul").hide();
		});
	}
	window.onload = menuInit;
</script>
<style type="text/css">
	.nav{ height:40px; line-height:40px; top:0; width:100%; position:relative;
	background:#666666} .nav li{ float:left; width:120px; text-align:center;}
	.nav li a{ color:#FFF; font-size:9pt; display:block;} .nav li a:hover{
	text-decoration:underline; font-weight:bold;} .nav li ul{ display:none;
	width:830px;position:absolute; left:120px;} .nav li ul li{ margin:0 0 0
	30px; width:auto;line-height:25px;} .nav li ul li a{ color:#666;} .nav
	li ul li a:hover{ font-weight:normal;} .nav li ul.index_show{ display:block;}
</style>
<body>
	<div class="nav">
		<ul>
			<li>
				<a href="#">
					菜单一
				</a>
				
			</li>
			<li>
				<a href="#">
					菜单二
				</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>
			<li>
				<a href="#">
					菜单三
				</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>
			<li>
				<a href="#">
					菜单四
				</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>
			<li>
				<a href="#">
					菜单五
				</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>
			<li>
				<a href="#">
					菜单六
				</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>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

一款基于jQuery的两级菜单代码，鼠标放在主菜单上，可以显示出二级的子菜单，没有过多修饰，这里为了演示方便，仅帖出了基本的HTML代码，有需要使用的可直接复制这些代码到你网页的对应标签中即可。由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-daohang/1018.html

网页特效

jQuery两级菜单代码

导航菜单下载排行

最新文章