Question

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

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

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

我明白了，这很好用：

＆＃13;

<!-- 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;
}

＆＃13;

<!-- 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>

＆＃13;

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

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

菜单必须可以从一个文件{la 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菜单

1 个答案: