I'm making a website with a very simple menu bar at the top of each page. I would like to make the menu easy to update, so hard-coding the whole menu into each page is not ideal. Modifying and re-uploading every page would be too cumbersome and since the website will be hosted statically, I cannot use PHP create the menu either.
My current solution uses an iframe and a separate html file with my menu.
This is pasted in the body of each new page:
<iframe src="menu.html" width="100%" height="55x" id="menuframe" style="border:none"></iframe>
I get this, which works nicely:
<!-- 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>This works fairly well for a simple menu with only a few buttons, but it doesn't scale up well. If there are enough buttons, then the iframe overflows and half the buttons will be cut in half. If I eventually move on towards a drop down menu with CSS, the menu items will be eaten by overflow and cut off, etc.
How can I make an easily editable menu for my static website?
The menu must be editable from one file, a la
menu.htmlor similar.I cannot use PHP.
I have never used JavaScript/jQuery but I am open to solutions that use them.
Dont use an Iframe, If you really dont want to get a hosting plan.
Here is how you can still use a single menu template for each page.
1 You can use JQuery's load function.
2 Create a JavaScript file with your menu on each page.
3 Or you can create an html page an include it on each page with: