Menu
With each new page I have to update the navigation panel. Which means I go from page to page copying and pasting my navigation bar. The more pages I add the harder it gets. Now I have in-consistent navigation bars. So what I'm looking for is a way to make an html file that contains only the navigation bar, then embed it into my code, like I'd do with CSS and JavaScript. That way if I edit the one file all other pages get updated. If I use the iframe tag there would be way to many problems, but I know of no other tag that can do what I need. So what should I do? I've done some research but all I can find is the iframe tag.. What should I do?
836
The simplest way is to just give the href #id_name in your navigation bar “a" tag link, and then give this href hash name to the content section id attribute where should be navigate to. Then this will navigate to section where you have added this name as a id in the page.
Create A SubnavUse any element to open the subnav/dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the subnav menu and add the subnav links inside it. Wrap a <div> element around the button and the <div> to position the subnav menu correctly with CSS.
If your page is strictly HTML+JavaScript, you can use HTML DOM innerHTML Property. Here is an example:
index.html
<body>
<nav id="navMenu"></nav>
<div> rest of web page body here </div>
<script src="script.js"></script>
</body>
about.html
<body>
<nav id="navMenu"></nav>
<div> rest of web page body here </div>
<script src="script.js"></script>
</body>
script.js
document.getElementById("navMenu").innerHTML =
'<ul>'+
'<li><a href="index.html">Home</a></li>'+
'<li><a href="services.html">Services</a></li>'+
'<li><a href="about.html">About</a></li>'+
'</ul>';
Important line here is nav tag, and all you need to do is to add this line in other pages in this example about.html.
I also recommend PHP or similar to accomplish what you need!
190
If your page is strictly HTML then you will just have to do copy and paste. It would have been a lot better if you were using may be PHP then you can simply do an include or require but as the situation is now, all you need is to do a clean HTML coding for your navigation. Indent your codes well then it will be easier for you to copy and page across all pages.
If you can use simple PHP codes then read this: http://www.w3schools.com/php/php_includes.asp
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
