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

最新推荐文章于 2024-04-30 22:06:17 发布

ganglong99

最新推荐文章于 2024-04-30 22:06:17 发布

阅读量2.1k

点赞数

分类专栏： JavaScript与CSS 文章标签： class function generator xhtml javascript 浏览器

本文链接：https://blog.csdn.net/ganglong99/article/details/3186341

版权

JavaScript与CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

将以下代码复制到文本文档，修改后缀为.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.οnlοad=positionmenu;
</script>
<body>
<div id="menu" οnmοuseοver="move(132)" οnmοuseοut="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>

ganglong99

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
页面左侧隐藏弹出式菜单，跟随页面滚动！

前段时间在网上找了很多关于菜单的例子，才发现菜单的样式太多了，觉得这种隐藏在页面左侧的弹出式菜单比较好看，仔细研究了一番，并且简化了一下，自己做了一个例子！将以下代码复制到文本文档，修改后缀为.html，然后双击即可看到效果（注：只能在IE浏览器中有效果，其他的浏览器没试过，firefox上不行） http://www.w3.org/TR/xhtml1/DTD/xhtm
复制链接

扫一扫