改进纯 HTML+CSS iframe 菜单答案

【问题标题】：Improving pure HTML+CSS iframe menu改进纯 HTML+CSS iframe 菜单
【发布时间】：2015-06-19 04:11:15
【问题描述】：

我正在制作一个网站，每个页面的顶部都有一个非常简单的菜单栏。我想让菜单易于更新，因此将整个菜单硬编码到每个页面中并不理想。修改和重新上传每个页面太麻烦了，由于网站是静态托管的，我也不能使用 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，但我对使用它们的解决方案持开放态度。

【问题讨论】：

标签： html css iframe menubar

【解决方案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" -->

【讨论】：

Static = no-php，后处理，服务器端任何东西，等等。只是普通的 HTML/CSS/客户端脚本。这是由例如：最便宜/免费的虚拟主机提供的。
我明白，但每月 7 美元，我认为没有真正的理由将自己限制在静态页面上。