自定义菜单制作

最新推荐文章于 2022-07-13 20:39:39 发布

lixiaolin77

最新推荐文章于 2022-07-13 20:39:39 发布

阅读量440

点赞数

分类专栏： JavaScript 文章标签： div function javascript html border table

本文链接：https://blog.csdn.net/lixiaolin77/article/details/7450378

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
	<head>
		<script  src="jquery-1.4.3.min.js"></script>
	</head>
	<script>
			var current_index=0;
			function navOver(index) {
				if(current_index==index){
					$("#nav_div").show();
					return;
				}
				var navObj=$("#nav_div_child div[id^=nav_"+index+"]");
				if(navObj.length==0)return;
				
				current_index=index;
				var navHtml="";
				navObj.each(function(){
						navHtml+="<td>"+this.innerHTML+"</td>";
					});
					
					$("#nav_tr").html(navHtml);
					$("#nav_div").show();
			}
			function navOut(index) {
				$("#nav_div").hide();
			}
		</script>
		<body>
			<table style="width:400px;text-align:center;border:0px solid red" border="0"" cellpadding="0" cellspacing="0">
				<tr>
					<td >
					 <div οnmοuseοver="navOver(1)" οnmοuseοut="navOut(1)">
					 		菜单1
					</div>
				</td>
				<td>
					 <div οnmοuseοver="navOver(2)" οnmοuseοut="navOut(2)" >
					 		菜单2
					</div>
				</td>
			</tr>
		</table>
		<div id="nav_c" style="position:absolute;height:25px;width:100%" >
				<div id="nav_div" style="background:#FFF;display:none;border:1px solid #CCC" οnmοuseοver='javascript:$("#nav_div").show();' οnmοuseοut="navOut()">
						<table id="nav_table">
							<tr id="nav_tr">
							</tr>
						</table>
				</div>
		</div>
		<div style="display:none" id="nav_div_child">
			<div id="nav_1_5" >子菜单01</div>
			<div id="nav_1_6"  >子菜单02</div>
			<div id="nav_1_7"  >子菜单03</div>
			<div id="nav_2_8" >子菜单21</div>
		</div>
	<body>
</html>

lixiaolin77

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义菜单制作

var current_index=0; function navOver(index) { if(current_index==index){ $("#nav_div").show(); return; } var navObj=$("#nav_div_child div[id^=nav_"+index+"]"); if(navObj.l
复制链接

扫一扫