论坛: 网站建设 标题: 版主进来看一下.(网页菜单的问题) 复制本贴地址    
作者: DIY [gongguyu]    论坛用户   登录
本来不想在这里提问题的,反正没有人理,但是没有办法,我身边没有人可以问,所以只好在这里发表试运气了.
代码:

<html>
<head>
<style>
  a{
    cursor: default;
    text-decoration: none;
    color: #333;
  }
  #menubar {

    width:768;
    height:26px;
    font:11px tahoma;
    color:#333;
    background:#eee;
  }
  #menubar a {
    padding:2px;
    margin:10px;
  }
  #menubar td {
    text-align:center;
    background:blue;
    border: 1px solid #eee;
    cursor:default;
    white-space:nowrap;
  }
  .menupane{
 
    position:absolute;
    border:1px solid #ccc;
    border-right:2px solid #ccc;
    border-bottom:2px solid #ccc;
    background:#fff;
   
    font:11px Tahoma;
    color:blue;
    width:200px;
  }
  #menubar img, .menupane img {
    margin-right:5px;
    vertical-align:middle;
  }
  #menubar img.hasMenu {
    margin-left: 10px;
    margin-right: 0;
  }
  .menupane a{
    display:block;
    padding:2px;
    padding-left:10px;
  }
  .menupane a:hover {
    background-color:blue;
    color:#fff;
  }
  #fft {font-family:tahoma;font-size:12px; color:white;font-weight:bold;}
</style>
<script language="JavaScript"><!--
  var mIndex = -1;
  var lastIndex = -1;
  var isOpen = false;
  document.onclick = doClick;
  var menuCount =5;
  function openLever1() {  //  打开下拉菜单
    var o = getObj("menu"+mIndex);
    if (getObj("submenu"+mIndex)) {
      show("submenu"+mIndex);  // 显示下拉菜单并定位下拉菜单
      getObj("submenu"+mIndex).style.left=o.offsetLeft;
      getObj("submenu"+mIndex).style.top=o.offsetTop + getObj("menubar").offsetHeight;
    }
    isOpen = true;
    lastIndex = mIndex;
    setStyle("menu"+mIndex,getHlightStatus());
  }
  function mouseOverMenu(index) {
    mIndex = index;
    setStyle("menu"+index,getHlightStatus());
    if (isOpen) {
      if (lastIndex>-1)
        hideMenu(lastIndex);
      setStyle("menu"+lastIndex,"none");
      if (getObj("menu"+index))  openLever1();
    }
  }
  function mouseOutMenu(index) {
    if (!isOpen || !getObj("submenu"+index)) {
      setStyle("menu"+index,"none");
    }
    mIndex = -1;
  }
  function doClick() {
    if (mIndex==-1) {  // not click on the menubar
      for (var i=0; i<menuCount; i++) {
        hideMenu(i);
        eval("setStyle('menu"+i+"','none')");
      }
      isOpen = false;
      lastIndex = -1;
    }
    else { // click on the menubar
      if (isOpen && mIndex==lastIndex) {
        hideMenu(lastIndex);
        isOpen = false;
      }
      else
        openLever1();
      setStyle("menu"+mIndex,getHlightStatus());
    }
  }
  function setStyle(id,style) {
    if (style=="close_hlight") {
      getObj(id).style.borderTop = "1px solid white";
      getObj(id).style.borderLeft = "1px solid white";
      getObj(id).style.borderRight = "1px solid #999";
      getObj(id).style.borderBottom = "1px solid #999";
    }
    else if (style=="open_hlight") {
      getObj(id).style.borderTop = "1px solid #999";
      getObj(id).style.borderLeft = "1px solid #999";
      getObj(id).style.borderRight = "1px solid white";
      getObj(id).style.borderBottom = "1px solid white";
    }
    else if (style=="none") {
      getObj(id).style.border = "1px solid #eee";
    }
  }
  function getHlightStatus() {
    if (isOpen) return "open_hlight";
    else return "close_hlight";
  }
  function getObj(id) {
    return document.getElementById(id);
  }
  function show(id) {
    if (getObj(id))
    getObj(id).style.display="block";
  }
  function hide(id) {
    if (getObj(id))
    getObj(id).style.display="none";
  }
  function hideMenu(index) {
    var id = "submenu" + index;
    if (getObj(id))
      hide(id);
  }
//--></script>
</head>
<body>
  <table id="menubar" cellspacing="0" cellpadding="0" border="0" align="center" ><tr>
    <td onmouseover="mouseOverMenu(0)" onmouseout="mouseOutMenu(0)" id="menu0" style="width:70px;"><a href="#">首页</a></td>
    <td onmouseover="mouseOverMenu(1)" onmouseout="mouseOutMenu(1)" id="menu1" style="width:90px;"><font id="fft">公司介绍</font></td>
    <td onmouseover="mouseOverMenu(2)" onmouseout="mouseOutMenu(2)" id="menu2" style="width:90px;"><img src="test.gif">Test<img src="arrowDown.gif" class="hasMenu"></td>
<td onmouseover="mouseOverMenu(3)" onmouseout="mouseOutMenu(3)" id="menu3" style="width:90px;"><img src="test.gif">Test<img src="arrowDown.gif" class="hasMenu"></td>
<td onmouseover="mouseOverMenu(4)" onmouseout="mouseOutMenu(4)" id="menu4" style="width:90px;"><img src="test.gif">Test<img src="arrowDown.gif" class="hasMenu"></td>
  </table>
  <div id="submenu1" class="menupane" style="display:none">
  <a href="#">最新文摘</a>
  <a href="#">菜鸟乐园</a>
  <hr>
  <a href="#" target="_blank">Demo</a>
  </div>
  <div id="submenu2" class="menupane" style="display:none">
  <a href="#">Level 1</a>
  <a href="#">Level 2</a>
  <hr>
  <a href="#" target="_blank">Demo</a>
  </div>
<div id="submenu3" class="menupane" style="display:none">
  <a href="#">最新文摘</a>
  <a href="#">菜鸟乐园</a>
  <hr>
  <a href="#" target="_blank">Demo</a>
  </div>
<div id="submenu4" class="menupane" style="display:none">
  <a href="#">最新文摘</a>
  <a href="#">菜鸟乐园</a>
  <hr>
  <a href="#" target="_blank">Demo</a>
  </div>
</body>
<html>


问题是:网页缩小一些,下拉菜单的位置会也现偏差,如何解决这个问题!急,在线等!麻烦看一下,在这里谢谢了.

地主 发表时间: 07-01-22 07:59

回复: NetFog [q70213526]   版主   登录
层的问题

是否用的IE?

我现在不在家。在长沙,要过几天才能回家,有空帮你试下。呵呵。如果很急的话。网上找找其他同志。

B1层 发表时间: 07-01-22 15:11

回复: DIY [gongguyu]   论坛用户   登录
只考虑IE一种情况!  麻烦有空帮忙看一下,急.先谢谢了.

B2层 发表时间: 07-01-22 21:49

回复: NetFog [q70213526]   版主   登录
用table吧。div不好控制

B3层 发表时间: 07-01-23 19:06

回复: q8898790 [q8898790]   论坛用户   登录
看不懂~~~  这是机密暗号吗??

B4层 发表时间: 07-04-14 21:42

回复: wysxm [wysxm]   论坛用户   登录
呵呵~~~~

B5层 发表时间: 07-07-05 10:04

论坛: 网站建设

20CN网络安全小组版权所有
Copyright © 2000-2010 20CN Security Group. All Rights Reserved.
论坛程序编写:NetDemon

粤ICP备05087286号