I just finished making my home/index.html page. To keep the nav bar where it is, and have it stay while users click through all my pages. Do I have to copy and paste the nav code to the top of each page? Or is there another way to do so that would look cleaner?
HMTL nav:
<nav>
<div>
<a href="/">
<div id="logo"><img src="image.png" alt="Home"/></div>
<div id="headtag"><img src="image.png" alt="Home"/></div>
<div id="tagline"><img src="image.png" alt="Home"/></div>
</a>
</div>
<div>
<a href="/" class="here">Home</a>
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
<input id="srchbar" type="search" placeholder="Search">
</div>
</nav>
You can use php for making multi-page website.
<?
php include 'header.php';
?>
(Above code will dump all html code before this)Your site body content.
I know this is a quite old question, but when you have JavaScript available you could use jQuery and its AJAX methods.
First, create a page with all the navigation bar's HTML content.
Next, use jQuery's $.get method to fetch the content of the page. For example, let's say you've put all the navigation bar's HTML into a file called navigation.html and added a placeholder tag (Like <div id="nav-placeholder">) in your index.html, then you would use the following code:
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
</script>
A very old but simple enough technique is to use "Server-Side Includes", to include HTML pages into a top-level page that has the .shtml extension. For instance this would be your index.shtml file:
<html>
<head>...</head>
<body>
<!-- repeated header: note that the #include is in a HTML comment -->
<!--#include file="header.html" -->
<!-- unique content here... -->
</body>
</html>
Yes, it is lame, but it works. Remember to enable SSI support in your HTTP server configuration (this is how to do it for Apache).
Brando ZWZ provides some great answers to handling this situation.
Re: Same navbar on multiple pages Aug 21, 2018 10:13 AM|LINK
As far as I know, there are multiple solution.
For example:
The Entire code for navigation bar is in nav.html file (without any html or body tag, only the code for navigation bar).
Then we could directly load it from the jquery without writing a lot of codes.
Like this:
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->
Solution2:
You could use JavaScript code to generate the whole nav bar.
Like this:
Javascript code:
$(function () {
var bar = '';
bar += '<nav class="navbar navbar-default" role="navigation">';
bar += '<div class="container-fluid">';
bar += '<div>';
bar += '<ul class="nav navbar-nav">';
bar += '<li id="home"><a href="home.html">Home</a></li>';
bar += '<li id="index"><a href="index.html">Index</a></li>';
bar += '<li id="about"><a href="about.html">About</a></li>';
bar += '</ul>';
bar += '</div>';
bar += '</div>';
bar += '</nav>';
$("#main-bar").html(bar);
var id = getValueByName("id");
$("#" + id).addClass("active");
});
function getValueByName(name) {
var url = document.getElementById('nav-bar').getAttribute('src');
var param = new Array();
if (url.indexOf("?") != -1) {
var source = url.split("?")[1];
items = source.split("&");
for (var i = 0; i < items.length; i++) {
var item = items[i];
var parameters = item.split("=");
if (parameters[0] == "id") {
return parameters[1];
}
}
}
}
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="main-bar"></div>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<%--add this line to generate the nav bar--%>
<script src="../assets/js/nav-bar.js?id=index" id="nav-bar"></script>
</body>
</html>
https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages
This is what helped me. My navigation bar is in the body tag. Entire code for navigation bar is in nav.html file (without any html or body tag, only the code for navigation bar). In the target page, this goes in the head tag:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Then in the body tag, a container is made with an unique id and a javascript block to load the nav.html into the container, as follows:
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->
Source: Stackoverflow.com