gpt4 book ai didi

html - 改进纯HTML+CSS iframe菜单

转载 作者:太空宇宙 更新时间:2023-11-04 11:46:59 25 4
gpt4 key购买 nike

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

最佳答案

如果您真的不想获得托管计划,请不要使用 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 - 改进纯HTML+CSS iframe菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30929763/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com