Question

我确信这个话题一直都会出现，但我似乎无法做出简明扼要的回答。我有一个垂直菜单栏，我想在我们的网页（＆gt; 20）中重复使用该网站菜单栏以html（UL，LI，A）编码，使用Div标签和CSS来实现所需的效果。

我们希望找到最简单的方法来重用所有网页中的菜单栏，同时能够根据需要进行维护和缩放，因此我们不必在每次添加页面时都修改所有页面。如果可能的话，我们宁愿避免编码方法，这意味着我们可以只使用一个我们根据需要编辑的主文件。正弦我们正在使用CSS和DIV我不会纠结帧是答案。有什么想法吗？

Answer 1

如果您不想使用编程语言，可以使用服务器端包含。

他们采取以下形式：

<!--#include virtual="menu.html" -->

并将在您将该标记放入HTML中的任何位置插入页面。它需要服务器端解析，因此您的Web服务器必须启用服务器端包含。您可以尝试一下，如果它不起作用，请联系您的服务器主机以查看是否可以启用它们。如果它是Apache，那么还有method of enabling them个.htaccess文件。

Answer 2

为了做到这一点，你将不得不使用一些服务器端技术。比如你可以......

将它们包含在php
将它们放在.net
将其放入rails

一些阅读：

http://us.php.net/manual/en/function.include.php

http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx

另一个解决方案是使用Javascript创建所有这些，但请不要这样做：）

HTML：

<script type="text/javascript" src="hack.js"></script>
<div id="mymenu">
</div>

hack.js：

function createMenu(){
  $("#mymenu").html("all the html of your menu");
}

Answer 3

如果没有任何服务器端脚本或Javascript，您可以使用object或iframe标记。

http://www.w3schools.com/tags/tag_object.asp

http://www.w3schools.com/tags/tag_iframe.asp

唯一需要注意的是在链接中指明target =“parent”。

希望有所帮助

Answer 4

使用w3脚本..

的index.html

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="header.html"></div>
<div w3-include-html="nav.html"></div>

<script>
w3IncludeHTML();
</script>

</body>
</html>

header.html中

<h1>Title</h1>

nav.html

<h2>Your nav</h2>

另请参阅：http://www.w3schools.com/howto/howto_html_include.asp

别忘了在本地主机上测试此代码。

Answer 5

我面对同样的事情。然后，我创建了一个用于存储导航栏html的新文件。

我创建了一个navbar.html文件，其中包含我的所有导航条形码。然后，在您想要导航栏的主html文件中，只需使用jquery包含此文件。

$(document).ready(function() {
    $('#navigation').load('navbar.html');
});

然后在您想要导航栏的位置，只需添加以下行：

<div id="navigation"></div>

Answer 6

作为一个六年前问题的现代答案：Web Components是特别可重复使用的HTML组件，而Polymer可能是目前最受欢迎的实现。目前几乎没有浏览器本身支持Web组件，因此至少需要一个Javascript polyfill。

Answer 7

如果你要使用PHP，你所要做的就是使用include命令，除了这一个命令之外没有编码。
另外，请查看server side includes

Answer 8

到目前为止，我发现的最佳解决方案之一是在Son of Suckerfish XHTML / CSS解决方案之后对菜单进行建模，该解决方案在互联网上有很好的文档，现在结合服务器上的一些逻辑来呈现无序列表。通过使用无序列表，您可以在输出结果方面有几个不同的选项，但只要菜单具有一些基本层次结构，您就可以生成它。然后，对于实际页面，您需要做的就是包含对菜单生成功能的引用。

Answer 9

我已经完成了两个不同的方式 - 一个使用服务器端（PHP），一个使用Javascript包含（用于需要能够在没有任何互联网连接或服务器功能的情况下运行的演示）。

对于PHP，您的页面必须以.php而不是.htm或.html结尾，这些非常适合替换页眉，页脚，导航等。在多个页面上重复的任何内容。

基本上你会创建普通代码，然后复制并粘贴你想要突破的代码 - 在本例中，你的导航 - 并将其保存在另一个名为（例如）inc_navigation.htm的文件中（可以调用此页面）。 HTM）。

然后在您的实际页面中，您将使用以下代码：

<?php include('inc_navigation.htm') ?>

那会在那时插入你的导航，如果你有一个改变，你就可以把它转到.htm文件，它会传播到包含它的任何页面。

对于javascript包含，您必须在要包含导航的每个文档的顶部包含以下行：

<script type="text/javascript" src="includes.js"></script>

然后你将创建一个名为includes.js的文档。

在本文档的顶部，您将声明导航变量：

var navigation  = new Array();  // This is for the navigation.

然后在同一个文档中稍微向下，您需要实际勾勒出导航代码（方括号中的行号是至关重要的 - 保持它们的顺序并从0开始 - 您不能在此代码中使用换行符，因此每个代码行必须是新行）：

// ==================== Navigation ==================== //
navigation[0]   = '<div id="tab_navigation">';
navigation[1]   = '<ul id="dropline">';
navigation[2]   = '<li><a href="index.htm"><b>Home</b></a></li>';
navigation[3]   = '<li><a href="about_us.htm"><b>About Us</b></a></li>';
navigation[4]   = '</ul>';
navigation[5]   = '</div><!-- Close TAB NAVIGATION -->';

然后在一段时间之后，您将实际插入将该代码放入您的页面的javascript（它实际上并没有将它放在那里，而是让它在页面中可访问而不实际改变.htm的代码page - 所以如果你查看源代码，你会看到代码的引用而不是代码本身。

function show(i)
 {
  for (x in i)
  {
   document.write(i[x]+'\n')
  }
 }

最后 - 在您的.htm文档中，比如说您的index.htm页面，您将用以下内容替换导航代码（放在上面的名为navigation的块中）：

<script type="text/javascript">show(navigation);</script>

SHOW之后和括号中的名称是变量的名称（先前声明）。

我有网站显示这两种方法正在使用中，如果你想看到它们只是给我发消息。

Answer 10

我正在寻找一种编写可重复使用的导航菜单的方法，该菜单在单击按钮时会切换（显示/隐藏）。我想分享一个对我有用的解决方案，以防其他人也想这样做。此解决方案使用jQuery，html和CSS。

将以下代码行添加到主index.html文件中的head标记中：

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

在正文标签中为导航添加div：

<div id="mySidenav" class="sidenav"></div>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#mySidenav").load("nav.html").toggle().width("400pt");
  });
});
</script>

创建一个HTML文件，它将是您的导航菜单所在的位置。我的文件名为nav.html，文件内容如下：

<a href="musubi.html">have you found your one true musubi?</a>` <a href="example2.html">item2</a> <a href="example3.html">item3</a>

如何实现可重用的HTML导航菜单？

10 个答案: