How can I make my navi-bar the same across my html?
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.
-
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!
讨论(0) -
In fact, if you are doing only front-end stuff like I do, using load() with jQuery is more than enough. Just like what Skitty and fskirschbaum said.
But I would like to add a few points,
1. based on @Skitty's comment, it is important to load your navbar.html on the server side, like simply host it on your github.io website and refer to it by its URL like$(document).ready(function() { $('#nav-container').load('https://berlinali.github.io/test%20header%20template/header.html #nav');}2. if you have css file, just put it inside < style >< /style> in the < header > part of your html file.
I push my code on github if you need some reference. Hope it helps! https://github.com/BerlinaLI/berlinali.github.io/tree/master/test%20header%20template
讨论(0) -
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
讨论(0)
加载中...
- 热议问题