兼容IE6,IE7和firefox的CSS菜单

评论(0)

为了实现某种菜单效果,已经忙碌了好多天,依旧存在一些问题没有解决。菜单样式如下:

menu1 menu2

最初设想是用下拉框,已经实现了消除下拉框的难看边线,但是必须点击才能显示内容,而且下拉框右侧的小三角无法设置样式,暂时放弃了;曾经使用过纯CSS的菜单,兼容IE7和FF,基本实现设计样式,但是在IE6下,二级菜单无法显示,又不得不放弃了;网上有人发文说用if豫剧判断IE6或者IE7对代码作改变可实现兼容,如下:

在前一种情况中的UL前加如下代码:<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->   

UL后加如下代码   <!--[if lte IE 6]></td></tr></table></a><![endif]-->       

但是问题依旧存在。   

最后干脆使用全div的形式,对IE6的兼容更进了一步,菜单样式如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
" http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">

      body{ margin:0px auto; width:768px; }
      *{text-decoration:none!important; }

      .pmHorizontalBottomOut{background-color: #999 !important; }
      .pmHorizontalBottomOut .level{ /
          width:120px;
          height:17;
          position:relative;
          display:block;
          background-color: D8D8D8;
          padding:0px 2px;
          margin:0px 1px 0px 0px;
          float:left;
      }
      .pmHorizontalBottomOut .level:hover {
          background-color: 6633FF;
          color: FFFFFF;
      }
      .pmHorizontalBottomOut .level_{display:none; }
     
      .pmHorizontalBottomOut .level:hover .level_ {
          top:-50px;
          left:45px;
          display:block;
          width:124px;
          height:auto;
          margin:0px -2px 0px -2px;
          background-color: EFEFEF;
          position:absolute;
      }
      .pmHorizontalBottomOut .level:hover .level_ .level_title {
        
          font-weight:bold;
          background-color: A7ADFE;
          color:white;
      }
      .pmHorizontalBottomOut .level:hover .level_ a:hover {
       
          background-color: F83658;
          color:white;
      }
      .pmHorizontalBottomOut .level_ * {
          display:block;
          color:black;
          padding:0px 2px;
      }
      
      .levelIe{
          width:120px;
          height:17;
          position:relative;
          display:block;
          background-color: D8D8D8;
          padding:0px 2px;
          margin:0px 1px 0px 0px;
          float:left;
      }
      .levelIe {
          background-color: 6633FF;
          color: FFFFFF;
      }
      .levelIe .level_ {
          left:45px;
          top:-50px;
          display:block;
          width:124px;
          height:auto;
          margin:0px -2px 0px -2px;
          background-color: EFEFEF;
          position:absolute;
      }
      .levelIe .level_ .level_title {
          font-weight:bold;
          background-color: A7ADFE;
          color:white;
      }
      .levelIe .level_ a:hover {
          background-color: F83658;
          color:white;
      }
      .levelIe .level_ * {
          display:block;
          color:black;
          padding:0px 2px;
      }

</style>
<script type="text/javascript">
//<![CDATA[
if (navigator.appName=="Microsoft Internet Explorer") {
      function fPmHorizontalBottomOut() {
          var getItem = document.getElementById("pmHorizontalBottomOut").getElementsByTagName("div");
          for (var i=0; i<getItem.length; i++) {
              getItem[i].onmouseover=function() {
                  if(    this.className=="level"){
                      this.className="levelIe";
                  }
              }
              getItem[i].onmouseout=function() {
                  if(    this.className=="levelIe"){
                      this.className="level";
                  }
              }//css popup menu script by shawl.qiu
          }
      }
      window.onload=fPmHorizontalBottomOut;
}
//]]>
</script>
</head>
<body>
<p/><p/><p/><p/><p/>
<div class="pmHorizontalBottomOut" id="pmHorizontalBottomOut">
      <div class="level" style="margin-top:30px;">
          <div class="levelTitle">level</div>
          <div class="level_">
              <div class="level_title">level_ title</div>
              <a href="?cat=level&id=1">level_ title 1</a>
              <a href="?cat=level&id=2">level_ title 2</a>
              <a href="?cat=level&id=3">level_ title 3</a>
              <a href="?cat=level&id=4">level_ title 4</a>
              <a href="?cat=level&id=5">level_ title 5</a>
          </div>
      </div>
      <div class="level" style="margin-top:60px;margin-left:-125px;">
          <div class="levelTitle">level 1</div>
          <div class="level_">
              <div class="level_title">level_ title</div>
              <a href="?cat=level_1&id=1">level_ title 1</a>
              <a href="?cat=level_1&id=2">level_ title 2</a>
              <a href="?cat=level_1&id=3">level_ title 3</a>
              <a href="?cat=level_1&id=4">level_ title 4</a>
              <a href="?cat=level_1&id=5">level_ title 5</a>
          </div>
      </div>
      <div class="level" style="margin-top:90px;margin-left:-125px;">
          <div class="levelTitle">level 2</div>
          <div class="level_">
              <div class="level_title">level_ title</div>
              <a href="?cat=level_2&id=1">level_ title 1</a>
              <a href="?cat=level_2&id=2">level_ title 2</a>
              <a href="?cat=level_2&id=3">level_ title 3</a>
              <a href="?cat=level_2&id=4">level_ title 4</a>
              <a href="?cat=level_2&id=5">level_ title 5</a>
          </div>
      </div>
      <div class="level" style="margin-top:120px;margin-left:-125px;">
          <div class="levelTitle">level 3</div>
          <div class="level_">
              <div class="level_title">level_ title</div>
              <a href="?cat=level_3&id=1">level_ title 1</a>
              <a href="?cat=level_3&id=2">level_ title 2</a>
              <a href="?cat=level_3&id=3">level_ title 3</a>
              <a href="?cat=level_3&id=4">level_ title 4</a>
              <a href="?cat=level_3&id=5">level_ title 5</a>
          </div>
      </div>
      <div class="level" style="margin-top:150px;margin-left:-125px;">
          <div class="levelTitle">level 4</div>
          <div class="level_">
              <div class="level_title">level_ title</div>
              <a href="?cat=level_4&id=1">level_ title 1</a>
              <a href="?cat=level_4&id=2">level_ title 2</a>
              <a href="?cat=level_4&id=3">level_ title 3</a>
              <a href="?cat=level_4&id=4">level_ title 4</a>
              <a href="?cat=level_4&id=5">level_ title 5</a>
          </div>
      </div>
</div>
</body>
</html>

虽然在IE6中二级菜单已经可以正常显示,但是出现了二级菜单与右侧内容重叠的情况,难道真的没有完美兼容的菜单吗?

其实在解决问题的过程中也在不断寻找新的方法,其中Amazon首页左侧菜单当属兼容典范,某高人的blog右侧的菜单也是完全兼容所有浏览器,但是仅仅分析代码已经让人头痛,貌似实在太复杂了。期待简单而完美之作的呈现。我的砖抛至此,大侠们快点献玉吧!

续:经过多方实验和求证,总觉得第三种方法出现重叠只是层布局的问题,尝试了改变div层的载入顺序,宣告失败,尝试了设置z-index,继续失败......偶然间发现,z-index设置中有个技巧,即重叠的两个层其中之一必须是position为absolute,终于找到了问题的关键,我的菜单终于全部兼容,实在太高兴了~~

发表评论


Type the characters you see in the picture above.