菜单的兑现原理 _Web前端

菜单的实现原理

本来要用GWT实现一个菜单，最后还是逃不开要理解一下CSS和HTML。

看了下面代码应该就能明白其中原理了。

<html>
<head>
<title>Menu example</title>
<style>
*{
	padding:0px; 
	margin:0px;
	border:0px;
}
.menuBarPanel{
	border:5px solid red;
	width:99%;
}
.menuPanel{
	width:250px;
	height:200px;
	border:5px solid black;
	background:white;
	display:none;
}
.farRight{
	position:absolute;
	right:1%;
	z-index:2;	
}
.contentPanel{
	width:99%;
	border:5px solid blue;
	background:yellow;
	position:absolute;
}
</style>
<script>
function show(){
	document.getElementById('menu').style.display='block';
}
function hide(){
	document.getElementById('menu').style.display='none';
}
</script>
</head>
<body>
	<div id="menuBar" class="menuBarPanel">
		<table style="width:100%;">
			<colgroup>
				<col style="width:50%;">
				<col style="width:50%;">
			</colgroup>
			<tr>
				<td></td>
				<!--How to locate the buttons on the far right.-->
				<td style="text-align:right;">
					<div>
						<input type="button" value="Hide" onClick="javascript:hide();"/>
						<input type="button" value="Show" onClick="javascript:show();"/>							
					</div>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<!--How to locate the menu on the far right.-->
					<div class="farRight">
						<div id="menu" class="menuPanel">Some options here!</div>
					</div>
				</td>
			</tr>
		</table>
	</div>
	<div id="content" class="contentPanel">
		<p>A</p>
		<p>B</p>
		<p>C</p>
		<p>D</p>
		<p>E</p>
	</div>
</body>
</html>