简单菜单

最新推荐文章于 2023-10-31 23:41:39 发布

z823520

最新推荐文章于 2023-10-31 23:41:39 发布

阅读量149

点赞数

分类专栏： JS随笔文章标签：框架 XHTML HTML

JS随笔专栏收录该内容

2 篇文章

订阅专栏

本文提供了一个HTML菜单的设计实例，通过JavaScript实现菜单项的展开与折叠效果。该实例使用了简单的CSS进行基本样式设置，并通过图片作为背景提升视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[b][size=large][color=green]下面是一个比较常用的菜单样式，我只做出了一个大体框架，样式没有加，大家可以自己设计样式，最终的目的是要弄清楚这种菜单制作的原理即可。[/color][/size][/b]


<!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>简单菜单</title>
<style>
body{font-size:12px;}
a{text-decoration:none;}
img{border:0}
</style>
<script language="javascript">
function show(str){
	var str1 = "td" + str;
	var str2 = "show" + str;
	document.getElementById("td1").style.background="url('images/l_b_03.gif')";
	document.getElementById("td2").style.background="url('images/l_b_03.gif')";
	document.getElementById("show1").style.display="none";
	document.getElementById("show2").style.display="none";
	document.getElementById(str1).style.background="url('images/l_b_05.gif')";
	document.getElementById(str2).style.display="block";
}
</script>
</head>

<body>
<table width="159" border="0">
  <tr>
    <td width="153"> </td>
  </tr>
  <tr>
    <td>
		<table width="100%" border="0" cellpadding="0" cellspacing="0">
		  <tr>
			<td style="background:url(images/l_b_05.gif) no-repeat;cursor:hand;height:27px;line-height:27px;" id="td1" onclick="show(1)"></td>
		  </tr>
		  <tr>
			<td id="show1">
				<table width="100%" border="0">
				  <tr></tr>
				  <tr>
					<td style=" background:url(images/bg.jpg); height:27px;">
						<table width="100%" border="0">
						  <tr>
							<td width="30%" height="27">图标</td>
							<td width="70%" ><a href="http://assen.iteye.com/blog/616764">要放的内容</a></td>
						  </tr>
						  <tr>
							<td width="30%">图标</td>
							<td width="70%"><a href="http://assen.iteye.com/blog/616764">要放的内容</a></td>
						  </tr>
						</table>
					</td>
				  </tr>
				</table>
			</td>
		  </tr>
		</table>
	</td>
  </tr>

  <tr>
    <td>
		<table width="100%" border="0">
		  <tr>
			<td style="background:url(images/l_b_03.gif) no-repeat;cursor:hand;height:27px;line-height:27px;" id="td2" onclick="show(2)"></td>
		  </tr>
		  <tr>
			<td id="show2" style="display:none;">
				<table width="100%" border="0">
				  <tr></tr>
				  <tr>
					<td style=" background-color:#CCCCFF;">
						<table width="100%" border="0">
						  <tr>
							<td width="27%">图标</td>
							<td width="73%"><a href="http://assen.iteye.com/blog/616764">要放的内容</a></td>
						  </tr>
						  <tr>
							<td width="27%">图标</td>
							<td width="73%"><a href="http://assen.iteye.com/blog/616764">要放的内容</a></td>
						  </tr>
						</table>
					</td>
				  </tr>
				</table>
			</td>
		  </tr>
		</table>
	</td>
  </tr>

  <tr>
    <td> </td>
  </tr>
</table>
</body>
</html>