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

Question

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

Answer 1

1. 包含一个脚本，用于记录和编写菜单

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>`)

或

1. 加载时菜单中的 ajax - 此处使用 jQuery:

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