1

我有一个多级下拉菜单（使用 HTML + CSS 完成），我想将它放在多个不同的页面上。将来我将需要更新此菜单并更改其内容，因此我将 HTML 保存在其自己的文件中，以便我可以一次将更改部署到所有页面（而不必反复浏览每个页面粘贴到更改的列表项中）。

我曾尝试使用 iframe，但这会切断高度有限的菜单项（当然，设置足够大的手动高度会留下大量空白）：

<iframe height="100%" src="menu.html" frameborder="no" width="100%" scrolling="no"></iframe>

我也尝试使用嵌入（这看起来很好，直到你将鼠标悬停在菜单项上——它只是在框架内滚动）：

<embed type="text/html" src="menu.html" width="100%" height="100%"></embed>

当代码被简单地转储到我需要它的各个页面时，菜单功能正常，所以我知道这不是问题。问题在于嵌入并从其自己的 HTML 文件中调用它。有没有一种简单的方法可以让下拉菜单按原样显示？

我应该提到，虽然我的 IT 部门有幸这样做，但这是一个他们不支持的项目。我只能在正文中编辑我的网页的 HTML，而不是头部。例外是我作为文件上传的 HTML 页面（如菜单代码）。所以有一些限制。

4

3 回答 3

0

好吧，这里有一些冗长的 javascript 方法，可能会让您的 IT 人员满意：

window.onload = new Function("load('embed-me.html','content')"); // Replace with URL of your file and ID of div you want to load into.

function ahah(url, target) {
  document.getElementById(target).innerHTML = ' Fetching data...';
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {ahahDone(url, target);};
    req.open("GET", url, true);
    req.send("");
  }
}  

function ahahDone(url, target) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}

function load(name, div) {
    ahah(name,div);
    return false;
}

不是我写的（链接）（我只是添加了页面加载位运行）。

经过测试和工作（至少在 Chrome 中）。尽管如果用户禁用了 javascript，您的网站将没有菜单！

编辑：

例子...

<body>
    <script type="text/javascript" src="embed-me.js"></script> <!-- load the javascript -->
    <div id="content"></div> <!-- html will be embedded here -->
</body>
于 2012-07-11T19:37:44.277 回答
0

我使用以下 php 代码并且工作得非常好。当您在线查看源代码时，它甚至不会显示。

    <?php include("menu.php"); ?>
于 2012-07-11T19:58:55.893 回答
0

使用 php 包含！！

好的，首先.. 复制菜单代码并将其保存到名为menu-1.php的文件中

然后每当您想使用菜单时；只需输入以下代码：

<?php include("menu-1.php"); ?>

这是做菜单的好方法，因为每次您需要更新菜单时，您不必更新每个页面，只需更新您的 menu-1.php

除非您使用 wamp 或 xamp，否则 PS PHP 可能不会显示在您的本地计算机上

于 2015-05-08T01:04:37.810 回答