fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法

2023年5月28日下午2:29 • JavaScript

为了解决Fireworks菜单生成器mm_menu.js在IE 7.0中的显示问题，我们需要进行以下步骤：

步骤一：升级mm_menu.js

首先，我们需要下载最新版本的mm_menu.js文件，并将其替换掉原始的文件。最新版本的mm_menu.js可以从Dreamweaver的官网或其他网络资源库中获取。

步骤二：修改CSS样式

接下来，我们需要修改CSS样式，以避免IE 7.0中的显示问题。具体来说，我们需要对子菜单（submenus）应用以下CSS样式：

ul.submenu {
  margin: 0;
  padding: 0;
  position: absolute;
  left: -999em;
}

该样式将确保子菜单在屏幕上不可见，并始终保持左侧位置为-999em。

步骤三：添加JavaScript代码

最后，我们需要将以下JavaScript代码添加到页面中，以解决在IE 7.0中显示的问题：

var ua = navigator.userAgent.toLowerCase();
var isIE7 = ua.indexOf('msie 7') != -1;
if(isIE7) {
  window.onload = function() {
    var menuDivs = document.getElementsByTagName('div');
    for(var i=0; i<menuDivs.length; i++) {
      if(menuDivs[i].className.indexOf('submenu') != -1) {
        menuDivs[i].parentNode.appendChild(menuDivs[i]);
      }
    }
  }
}

该代码将在载入页面时检查用户代理（user agent），如果检测到IE 7.0，则将所有子菜单（submenus）的父节点（parentNode）设置为该子菜单的新位置，以解决IE 7.0中的显示问题。

示例说明一

为了更清楚地说明以上步骤，考虑以下示例：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>mm_menu.js示例</title>
  <script src="mm_menu.js"></script>
  <style type="text/css">
    ul.submenu {
      margin: 0;
      padding: 0;
      position: absolute;
      left: -999em;
    }
  </style>
  <script type="text/javascript">
    var ua = navigator.userAgent.toLowerCase();
    var isIE7 = ua.indexOf('msie 7') != -1;
    if(isIE7) {
      window.onload = function() {
        var menuDivs = document.getElementsByTagName('div');
        for(var i=0; i<menuDivs.length; i++) {
          if(menuDivs[i].className.indexOf('submenu') != -1) {
            menuDivs[i].parentNode.appendChild(menuDivs[i]);
          }
        }
      }
    }
  </script>
</head>
<body>
  <div id="menu1" class="mam">
    <a href="#">主菜单1</a>
    <div class="submenu">
      <a href="#">子菜单1</a>
      <a href="#">子菜单2</a>
      <a href="#">子菜单3</a>
    </div>
  </div>
</body>
</html>

在这个示例中，我们包含了mm_menu.js文件，并对子菜单应用了所述的CSS样式。通过检测用户代理，我们在页面加载时自动执行JavaScript代码，以解决IE 7.0的显示问题。

示例说明二

考虑下面的HTML代码：

<div id="menu1" class="mam">
  <a href="#">主菜单1</a>
  <div id="submenu1" class="submenu">
    <a href="#">子菜单1</a>
    <a href="#">子菜单2</a>
    <a href="#">子菜单3</a>
  </div>
</div>

在这个示例中，我们没有使用mm_menu.js文件，而是手动创建了一个子菜单。我们依然可以遵循之前的步骤来解决IE 7.0中的显示问题。

首先，我们需要对子菜单应用以下CSS样式：

ul.submenu {
  margin: 0;
  padding: 0;
  position: absolute;
  left: -999em;
}

接着，我们需要添加以下JavaScript代码：

var ua = navigator.userAgent.toLowerCase();
var isIE7 = ua.indexOf('msie 7') != -1;
if(isIE7) {
  window.onload = function() {
    var submenuDiv = document.getElementById('submenu1');
    submenuDiv.parentNode.appendChild(submenuDiv);
  }
}

该代码将在载入页面时检查用户代理，并将子菜单（ID为'submenu1'）的父节点（parentNode）设置为该子菜单的新位置。这将解决IE 7.0中的显示问题。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法 - Python技术站