Question

是否可以创建单个下拉菜单，而不是通过在每个页面上复制相同的代码片段？使用框架是解决这个问题的好方法吗？

Answer 1

我认为创建一个只包含菜单的html页面及其所有绝对URL的链接可能是一个解决方案，尽管 @Igor Ivancha 是正确的，并且解决方案是使用后端，这是通常的做法。

假设你有你的html页面：

<nav id="godmenu">
   <ul>
     <li><a href="http://yourdomain.com/page1.html">page1</a></li>
     <li><a href="http://yourdomain.com/page2.html">page2</a></li>
     <li><a href="http://yourdomain.com/page3.html">page3</a></li>
   </ul>
</nav>

然后在每个页面中：

<head>
    <link rel="stylesheet" href="path to your god menu style" />
</head>

<iframe src="http://yourdomain.com/yourmenu.html"></iframe>

虽然这不是最佳做法，但如果页面所需的只是一个动态菜单，它应该适合您，因此不需要在您的网站上实现服务器端代码。

然后，如果您的网站中没有那么多页面，为什么不在每个页面中添加硬编码的菜单（尽管很痛苦）。

或者只使用PHP作为所有托管支持的后端。

另一种方法是使用Javascript

jQuery例如

$("div").load("http://yourdomain.com/menu.html #godmenu");

它会将页面的特定部分加载到另一个页面。

我相信这是最好的解决方案。

Answer 2

使用iframe引用您自己的网站很奇怪，并且会带来意想不到的行为。

您可能需要的是部分呈现，这是一个许多前端和后端框架的概念。

如果您的网站是静态的，并且您没有服务器端呈现，则可以使用JS在客户端中执行此操作。使用jquery的穷人部分渲染器可能如下所示：

＆＃13;

$(function() {
  $("[render-partial]").each(function(i, el) {
    var
      $el = $(el),
      partialName = $el.attr("render-partial"),
      partial = $("partial[name='" + partialName + "']");

    $el.append(partial.html());
  })
});

＆＃13;

partial { display: none; }
.red { background-color: red }
.tomato { background-color: tomato }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<partial name="dropdown">
  <ul>
    <li><a href="/asdf">asdf</a></li>
    <li><a href="/qwer">qwer</a></li>
    <li><a href="/uiop">uiop</a></li>
  </ul>
</partial>

<div render-partial="dropdown" class="red"></div>
<div render-partial="dropdown" class="tomato"></div>

＆＃13;

查看live。

一个下拉菜单来统治它们

2 个答案: