Improving pure HTML+CSS iframe menu -
i'm making website simple menu bar @ top of each page. make menu easy update, hard-coding whole menu each page not ideal. modifying , re-uploading every page cumbersome , since website hosted statically, cannot use php create menu either.
my current solution uses iframe , separate html file menu.
pasted in body of each new page:
<iframe src="menu.html" width="100%" height="55x" id="menuframe" style="border:none"></iframe>
i this, works nicely:
<!-- `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; }
<!-- `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"> </a> </div></div> </body> </html>
this works simple menu few buttons, doesn't scale well. if there enough buttons, iframe overflows , half buttons cut in half. if move on towards drop down menu css, menu items eaten overflow , cut off, etc.
how can make editable menu static website?
the menu must editable 1 file, la
menu.html
or similar.i cannot use php.
i have never used javascript/jquery open solutions use them.
dont use iframe, if dont want hosting plan.
here how can still use single menu template each page.
1 can use jquery's load function.
$(document).ready(function(){ $('#somecontainer').load('path-to-your-html'); });
2 create javascript file menu on each page.
<script src="path-to-your-js"></script>
3 or can create html page include on each page with:
<!--#include virtual="path-to-your-html" -->
Comments
Post a Comment