菜单的实现原理

来源：互联网发布：linux查看ip命令编辑：程序博客网时间：2024/05/18 02:19

本来要用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>