没有服务器语言的所有页面上的相同菜单？

【问题标题】：Same menu on all pages without server languages?没有服务器语言的所有页面上的相同菜单？
【发布时间】：2018-12-03 18:25:17
【问题描述】：

我需要在我们的 Intranet 上创建一个包含多个页面的简单信息站点。我需要在所有页面上都有相同的菜单。我知道我可以用 php 或其他服务器语言来做到这一点，但我在服务器上没有它。另一种选择是框架，但它是旧的，不推荐。其他解决方案？

【问题讨论】：

只是一个外部 javascript 和 CSS 文件 - 或将其 ajax 到一个 div 中
this 是谷歌搜索您的问题的第一个结果
@LelioFaieta 但是 w3scools 不是质量参考——我可以通过查看他们用来包含一个简单文件的可怕脚本来确认这一点
@mplungjan 这只是为了证明谷歌搜索有很多解决方案。这只是数千个尚未进行研究并要求我们为它们编写代码的问题中的最后一个。我同意这不是“解决方案”，但建议进行一些研究
Minimal effort

标签： html css frames

【解决方案1】：

包含一个用于 document.write 菜单的脚本

document.write(`<style>/* CSSTerm.com Simple CSS menu */

br { clear:left }

.menu_simple {
    width: 100%;
    background-color: #005555;
}

.menu_simple ul {
    margin: 0; padding: 0;
    float: left;
}

.menu_simple ul li {
    display: inline;
}

.menu_simple ul li a {
    float: left; text-decoration: none;
    color: white; 
    padding: 10.5px 11px;
    background-color:  #005555;
}
 
.menu_simple ul li a:visited {
    color: white;
}
 
.menu_simple ul li a:hover, .menu_simple ul li .current {
    color: white;
    background-color: #5FD367;
}</style><div class="menu_simple">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<br />
</div>`)

或

加载时菜单中的ajax - 这里使用jQuery：

$(function() {
  $("#menu").load("menu.html"); // #menu is a div with id=menu
});

【讨论】：