发表时间：2008-12-02
最后修改：2008-12-02
前段时间在网上找了很多关于菜单的例子，才发现菜单的样式太多了，觉得这种隐藏在页面左侧的弹出式菜单比较好看，仔细研究了一番，并且简化了一下，自己做了一个例子！
将以下代码复制到文本文档，修改后缀为.html，然后双击即可看到效果（注：只能在IE浏览器中有效果，其他的浏览器没试过，firefox上不行）
<!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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<style>
#menu{
visibility:hidden;
cursor:hand;
position:absolute;
top:150px;
}
#menu table{
width:150px;
background-color:black;
border-style:none;
cursor:hand;
}
.bar{
background-color:#0099FF;
font-size:16px;
font-weight:bold;
text-align:center;
}
.menu{
text-align:center;
width:16px;
background-color:#FF6666;
font-size:13px;
}
.menuItem{
background-color:white;
height:20px;
font-size:12px;
text-align:center;
}
</style>
<script language="JavaScript">
function move(x) {
menu.style.pixelLeft += x;
menu.style.visibility = "visible";
}
function positionmenu(){
move(-132);
}
function makeStatic() {
if (typeof window.pageYOffset != 'undefined') {
diffY = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
diffY = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
diffY = document.body.scrollTop;
}
menu.style.pixelTop=diffY+150;
}
setInterval("makeStatic()",1);
window.onload=positionmenu;
</script>
<body>
<div id="menu" onmouseover="move(132)" onmouseout="move(-132)">
<table cellpadding="0" cellspacing="1">
<tr>
<td class="bar">
Menu
</td>
<td class="menu" rowspan="100">
菜<br><br><br>单
</td>
</tr>
<tr>
<td class="menuItem">
网络管理
</td>
</tr>
<tr>
<td class="menuItem">
修改密码
</td>
</tr>
<tr>
<td class="menuItem">
数据查询
</td>
</tr>
<tr>
<td class="menuItem">
数据查询
</td>
</tr>
<tr>
<td class="menuItem">
数据查询
</td>
</tr>
<tr>
<td class="menuItem">
数据查询
</td>
</tr>
</table>
</div>
<div style="height:2000px;">
</div>
</body>
</html>
