简单菜单

最新推荐文章于 2024-05-04 14:33:04 发布

Bruce54

最新推荐文章于 2024-05-04 14:33:04 发布

阅读量433

点赞数

文章标签： div iframe menu function class html

本文链接：https://blog.csdn.net/epng54/article/details/3300666

版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>简单菜单</title>


<style>
  #div1 {
   position:absolute;
   z-index:1;
   width:100px;
   height:130px;
   background-color:#d2e8ff;
   visibility:hidden;
  }

  .sub {
   cursor:hand;
   font-size:12px;
  }

  a {
   cursor:hand;
   text-decoration:none;
   color:blue;
   font-size:12px;
   margin-left:50px;
   height:10px;
  }

  select {
   width:200px;
   margin-top:10px;
  }
</style>

<script>
  function show(){
   var div1 = document.getElementById("div1");
   div1.style.top = getTop(div1.parentNode) + div1.parentNode.clientHeight + "px";
   div1.style.left = getLeft(div1.parentNode);
   div1.style.visibility = 'visible';
   //创建一个无内容的iframe来挡住select框
   var menuShim = document.getElementById(div1.id + "_shim");
   if (menuShim) {
    menuShim.style.display = "block";
   } else {
    menuShim = document.createElement("iframe");
    menuShim.id = div1.id + "_shim";
    menuShim.frameBorder = "no";
    menuShim.scrolling = "no";
    menuShim.width = div1.clientWidth;
    menuShim.height = div1.clientHeight;
    menuShim.style.position = "absolute";
    menuShim.style.left = getLeft(div1);
    menuShim.style.top = getTop(div1);
    document.body.appendChild(menuShim);
   }
  }

  function hide(){
   var curObj = document.getElementById("div1");
   curObj.style.visibility='hidden'
   var menuShim = document.getElementById(curObj.id + "_shim");
   if (menuShim !== null) {
    menuShim.style.display = "none";
   }
  }

  function getLeft(obj) {
   var thisValue = 0;
   if (obj) {
    thisValue = obj.offsetLeft + getLeft(obj.offsetParent);
   }
   return thisValue;
  }

  function getTop(obj) {
   var thisValue = 0;
   if (obj) {
    thisValue = obj.offsetTop + getTop(obj.offsetParent);
   }
   return thisValue;
  }

</script>
</head>
<body>
<a id="menu" οnmοuseοver="show()" οnmοuseοut="hide()">Menu Test
  <div id="div1">
   <div class="sub" οnmοuseοver="style.backgroundColor='highlight'" οnmοuseοut="style.backgroundColor=''">sub menu 1</div>
   <div class="sub" οnmοuseοver="style.backgroundColor='highlight'" οnmοuseοut="style.backgroundColor=''">sub menu 2</div>
  </div>
</a>

<br>

<select><option>aa</option><option>bb</option></select>
</body>
</html>

Bruce54

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单菜单

简单菜单提供定位函数，用iframe作载体，不会被select挡住 --> #div1 { position:absolute; z-index:1; width:100px; height:130px; background-color:#d2e8ff; visibility:hidden; } .sub { cur
复制链接

扫一扫