将所有导航栏菜单项放在 CSS 而不是 HTML答案

【问题标题】：Place all navbar menu items in a CSS instead of HTML将所有导航栏菜单项放在 CSS 而不是 HTML
【发布时间】：2014-01-15 18:54:14
【问题描述】：

我正在使用 Bootstrap + HTML + CSS 做我的第一个网站，如果没有这个网站，我会完全迷失方向。

我有 11 个 html 文件，顶部都有一个通用导航栏，还有一个通用菜单项和一个搜索块。每次我有一个新想法并向菜单（导航栏）添加一个项目时，我都必须复制并粘贴到所有其他 10 个文件中。

有没有一种方法可以在 CSS 中添加菜单项，使其出现在所有页面中？

【问题讨论】：

标签： html css twitter-bootstrap navbar

【解决方案1】：

不要使用 CSS 执行此操作 - CSS 用于样式化，而不是添加内容。最好的方法是将导航放在单独的文档中，并在必要时包含它。三个明显的选择是：

按照 Hayder Abbass 的回答中所述使用 PHP
使用 JavaScript，请参见此处：Include another HTML file in a HTML file
使用 iFrame（有关 iFrame 的信息，请参阅有关 Javascript 的链接。

根据您使用的技术，可能还有其他方法可以做到这一点，但 PHP 和 Javascript 可能是最常见的。请记住您通过选择任一方式添加的限制：

PHP 需要一个能够正确处理 PHP 的服务器；这意味着您的托管服务提供商需要支持这一点（虽然很常见）。
Javascript 需要用户在其浏览器中启用 Javascript。虽然这可能很常见，但如果用户没有启用 Javascript，他们将看不到您的导航。这很糟糕。

实际上还有另一种选择，它与使用的技术分开。您还可以考虑使用支持某种模板的网站编辑器/应用程序。例如，使用 Adobe DreamWeaver 时，您可以轻松创建模板。这意味着您的所有导航都可以在您的模板中，并且每次更新模板时您的页面都会自动更新。我敢肯定，通过谷歌搜索编辑器会为您提供大量支持类似功能的商业、免费或几乎免费的编辑器。

【讨论】：

【解决方案2】：

您可以这样做的一种常见方法是将所有 html 文件转换为 php 文件（重命名文件扩展名）。然后把你的公共代码放在 header.php 中。例如：

header.php 应该包含如下内容：

<header role="banner" class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
  <div class="container">

    <nav role="navigation" class="collapse navbar-collapse bs-navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="./getting-started">Getting started</a>
        </li>

        <li>
          <a href="./components">Components</a>
        </li>
        <li>
          <a href="./javascript">JavaScript</a>
        </li>
        <li>
          <a href="./customize">Customize</a>
        </li>
      </ul>

    </nav>
  </div>
</header>

然后在您的每个文件中，将其引用为：

include_once('header.php');

如果您对导航栏有任何更改，您只需编辑 header.php 以反映所有其他页面的更改。

此页面上的更多信息： Creating a PHP header/footer

【讨论】：

澄清一下：这不是唯一的方法，只是一种非常常见的（如果PHP可用，可能是最好的）方法。如果您不能或不想使用 PHP，例如，您可以包含添加菜单的 Javascript。