如何在不插入整个代码的情况下嵌入现有的多级下拉菜单

How can I embed an existing multi-level drop down menu without inserting the whole code?

本文关键字：情况下 下拉菜单 多级 代码 插入      更新时间：2023-09-26

我有一个多级下拉菜单（使用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页面作为文件（如菜单代码）。因此存在一些限制。

这里有一种冗长的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>

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

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

使用php Include！！

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

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

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

这是一个很好的菜单方式，因为每次你需要更新菜单时，你不必更新每个页面，只需更新你的菜单-1.php

p.S.PHP可能不会出现在您的本地机器上，除非您使用的是wamp或example

相关文章：