改进纯 HTML+CSS iframe 菜单

Question

我正在制作一个网站，每个页面的顶部都有一个非常简单的菜单栏。我想让菜单易于更新，因此将整个菜单硬编码到每个页面中并不理想。修改并重新上传每个页面太麻烦了，而且由于网站将静态托管，我也无法使用 PHP 创建菜单。

我当前的解决方案使用 iframe 和一个单独的 html 文件与我的菜单。
这被粘贴在每个新页面的正文中：

<iframe src="menu.html" width="100%" height="55x" id="menuframe" style="border:none"></iframe>

我明白了，效果很好：

<!-- This is my `theme.css` -->
#menudiv {
 width: 100%;
 height: 38px;
}
.menu-item {
 height: 20px;
 width: 120px;
 margin: 0;
    display: inline-block;
    text-align: center;
    padding: 4px;
    border-radius: 50px;
    background: 000000;
    border: 2px solid black;
}

<!-- This is `menu.html`: -->
<!DOCTYPE html>

<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" type="text/css" href="theme.css">
</head>

<body>
 <div align="center"><div id="menudiv" align="center">
  <a href="index.html" title="Home" class="menu-item" target="_top">  Home  </a>
  <a href="index.html" title="Home" class="menu-item" target="_top">  About </a>
 </div></div>
</body>

</html>

这对于只有几个按钮的简单菜单非常有效，但不能很好地扩展。如果有足够多的按钮，那么 iframe 就会溢出，一半的按钮将被切成两半。如果我最终使用 CSS 转向下拉菜单，菜单项将被溢出和截断等吃掉

如何为我的静态网站制作易于编辑的菜单？

菜单必须可以从一个文件编辑，如 menu.html 或类似文件。
我无法使用 PHP。
我从未使用过 JavaScript/jQuery 但我愿意接受使用它们的解决方案。

Answer 1

如果您真的不想获得托管计划，请不要使用 Iframe。

以下是您仍然可以为每个页面使用单个菜单模板的方法。

1 您可以使用JQuery的加载功能。

$(document).ready(function(){
    $('#somecontainer').load('path-to-your-html');
});

2 创建一个 JavaScript 文件，每个页面上都有您的菜单。

   <script src="path-to-your-js"></script>

3 或者您可以创建一个 html 页面并将其包含在每个页面上：

 <!--#include virtual="path-to-your-html" -->

改进纯 HTML+CSS iframe 菜单

Improving pure HTML+CSS iframe menu

html

css

iframe

menubar