页面左侧隐藏弹出式菜单，跟随页面滚动！

ganglong99

浏览: 162102 次
性别:
来自: 重庆

最近访客更多访客>>

shujitao

353631297

wulunbi

imyth

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

IE Firefox 浏览器 JavaScript XHTML

前段时间在网上找了很多关于菜单的例子，才发现菜单的样式太多了，觉得这种隐藏在页面左侧的弹出式菜单比较好看，仔细研究了一番，并且简化了一下，自己做了一个例子！

将以下代码复制到文本文档，修改后缀为.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>