文章/答案/技术大牛

发布

社区首页 >问答首页 >改进纯HTML+CSS iframe菜单

问改进纯HTML+CSS iframe菜单
EN

Stack Overflow用户

提问于 2015-06-19 04:11:15

回答 1查看 1.9K关注 0票数 0

我正在制作一个网站，在每个页面的顶部有一个非常简单的菜单栏。我想让菜单很容易更新，所以硬编码整个菜单到每一页都不是理想的。修改和重新上传每一页将是太麻烦的，因为网站将是静态的，我不能使用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的下拉菜单，那么菜单项就会被溢出和切断等等吃掉。

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

菜单必须可以从一个文件( la menu.html或类似文件)编辑。
我不能使用PHP。
我从未使用过JavaScript/jQuery，但我对使用JavaScript/jQuery的解决方案持开放态度。

html

css

iframe

menubar

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-06-19 04:15:13

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

下面是如何仍然可以为每个页面使用一个菜单模板。

1您可以使用JQuery的load函数。

$(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" -->

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30929763

复制

相似问题

问改进纯HTML+CSS iframe菜单
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问改进纯HTML+CSS iframe菜单EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问改进纯HTML+CSS iframe菜单
EN