How can I make my navi-bar the same across my html?

Question

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?

The traditional way is to create separate header and footer files, and use PHP to `include` those into your page. Unless you want to use iframes, I'm not sure if there's a way to achieve this using only HTML. By the way, I would not recommend using iframes. http://php.net/manual/en/function.include.php — Charles, Mar 16 '13 at 04:07
But by using the php method, won't the pages themselves have to be in php? or can I just put a little snippet of code like javascript? — BBMAN225, Mar 16 '13 at 04:09
No, the pages do not have to be in PHP. The pages can contain HTML code and they can still be "embedded" using PHP, using the `include` or `require` functions. — Charles, Mar 16 '13 at 04:13
See my answer for some sample code and a more lengthy explanation. — Charles, Mar 16 '13 at 04:22

score 17 · Answer 1 · answered Mar 03 '15 at 23:43

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!

Can we include this as an HTML import rather than writing through JavaScript? — Sid, Dec 14 '16 at 13:04

score 2 · Answer 2 · answered Mar 16 '13 at 04:11

2

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

answered Mar 16 '13 at 04:11

OmniPotens

1,125
13
30

I've tried using php and I'm having a problem.. One problem might be the particular editor/hosting service I'm using is... Quite frankly weird. For one, if I wanna make something like a *.js file or a *.css file I have to do something like this: strangely though when I put in and put in the code (with a corresponding page) is does nothing. And btw I'm gonna comment this on all the answers, hopfully one of you has the answer. – BBMAN225 Mar 16 '13 at 18:37

score 2 · Answer 3 · edited May 23 '17 at 12:25

2

I'd strongly recommend using PHP:

<?php include "header.html"; ?>

However, if that is not an option, you can use Server Side Includes:

File in the same dir:

<!--#include file="header.html"-->

File in a different dir:

<!--#include virtual="/header.html"-->

You'll need a Linux/Apache (not Windows) server for this to work. You'll also need to use the .shtml file extension.

Alternatively, given that you want to keep .html extensions, you can make Apache "think" that all .html files are actually .php:

Create a .htaccess file at the root of your website and add this line:

AddType application/x-httpd-php .html .htm

If your are running PHP as CGI (probably not the case), you should write instead:

AddHandler application/x-httpd-php .html .htm

(Taken from this answer)

edited May 23 '17 at 12:25

Community

1
1

answered Mar 16 '13 at 04:12

Danny Beckett

20,529
24
107
134

I've tried this and I'm having a problem.. One problem might be the particular editor/hosting service I'm using is... Quite frankly weird. For one, if I wanna make something like a *.js file or a *.css file I have to do something like this: strangely though when I put in and put in the code (with a corresponding page) is does nothing. And btw I'm gonna comment this on all the answers, hopfully one of you has the answer. – BBMAN225 Mar 16 '13 at 18:37
There is disadvantages for including navbar on server side. In most cases it will increase the size of the page file without a good reason, especially when your navbar is static in most of the time. I'd rather recommend attaching the navbar to webpages by javascript eg.jquery.load('navbar.html'). In this case the browser will cache the navbar.html for most users and this can save a lot of traffic for your server. – stonyau Feb 02 '15 at 14:55

score 1 · Answer 4 · answered Mar 16 '13 at 04:22

If you would like to use PHP to achieve, this, you can do something similar to the code below. You'll have 2 "template" files, and then however many "content" files you need.

header.php will include content on the header (logo, nav menu, etc)
footer.php will include content on the footer (bottom navigation, copyright, disclaimers, etc.)
content.php will include the actual content you wish to display. You can have an infinite number of "content" pages.

Note that while these files have .php extensions, HTML code still works perfectly fine. So you can do something like this for every content.php:

content.php

<?php include "header.php"; ?>

<div class="content">
Your page content will go here
</div>

<?php include "footer.php"; ?>

header.php

<html>
<body>
<div class="header">
Header content such as nav bar here
</div>

footer.php

<div class="footer">
Footer content such as copyright here
</div>
</body>
</html>

In this way, you can change the contents of header.php and footer.php just once, and the changes will be reflected in all the pages you've included the files in.

If you have any further questions or would like something explained again, feel free to post a comment.

I've tried this and I'm having a problem.. One problem might be the particular editor/hosting service I'm using is... Quite frankly weird. For one, if I wanna make something like a *.js file or a *.css file I have to do something like this: `` strangely though when I put in `` and put `` in the code (with a corresponding page) is does nothing. — BBMAN225, Mar 16 '13 at 04:32
Also, if the problem does happen to be my particular hosting service, then I'd be more then happy to switch if you could suggest a better, free one. — BBMAN225, Mar 16 '13 at 04:35

score 1 · Answer 5 · answered Mar 14 '17 at 09:35

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

score 0 · Answer 6 · answered Mar 16 '13 at 04:07

0

You can use server side scripting languages like php or ruby. Or you can create some say menu.json file and create menu from that in javascript.

With serverside you should setup server or you can use XAMPP for fast setup.
Create header.html with all your menu links
Inlude menu file by using <?php include 'header.html'; ?> line (all files where you use it should be with .php extension or you can edit php config file for .html extension)

answered Mar 16 '13 at 04:07

kirugan

2,514
2
22
41

Yes this would work, but I like my current menu and I'm not sure how to get the same result, or anything like it, from javascript. I'm sure it's possible though. – BBMAN225 Mar 16 '13 at 04:10
I've tried using php and I'm having a problem.. One problem might be the particular editor/hosting service I'm using is... Quite frankly weird. For one, if I wanna make something like a *.js file or a *.css file I have to do something like this: strangely though when I put in and put in the code (with a corresponding page) is does nothing. And btw I'm gonna comment this on all the answers, hopfully one of you has the answer. – BBMAN225 Mar 16 '13 at 18:38
what is tag ? create one file called info.php and put inside it this code: phpinfo() ?> does it make something ? – kirugan Mar 16 '13 at 19:33
I can't make a file. And I figured a tag is what everyone uses. In this editor is more important then , of course I still use html, but I didn't when I first started. – BBMAN225 Mar 18 '13 at 02:41

score 0 · Answer 7 · answered Mar 16 '13 at 04:33

0

PHP would probably be the best method in this case, but since it sounds like you already have everything set up in pure HTML and JavaScript, you could consider using jQuery to load an external file into the DOM.

jquery.load('header.html')

This, of course has its own set of concerns, but you can effectively control everything from a simple .js framework without having to use php includes and doesn't require an iFrame.

You'd still potentially want to address a fallback for browsers without JavaScript turned on, so I only suggest this without knowing all the details, and I would still suggest that php would still be a better solution since you're allowing the server to do the heavy lifting.

answered Mar 16 '13 at 04:33

ephbaum

362
4
21

What version of jQuery are you calling? You can view documentation on getting this up and running here http://api.jquery.com/load/ There's an example of this at work here: http://stackoverflow.com/questions/9152446/creating-templated-persistant-header-footer-template-in-jquery-mobile-and-phoneg – ephbaum Mar 17 '13 at 14:43
What do you mean what version? I just use the script tag, idk what version. – BBMAN225 Mar 18 '13 at 02:38
jQuery is a library that leverages JavaScript to do amazing things with your webpages, it is not, however, native JavaScript. You should check out www.jquery.com to learn more about including this library on your website and how to use it. – ephbaum Mar 19 '13 at 18:54

score 0 · Accepted Answer · answered Mar 21 '13 at 17:21

I figured it out myself, you can use a JavaScript file and use document.write then put this where you want it to go:

<script type="text/javascript" src="/js/sidebar.js"/>

Here's my js file:

document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");

If you want to use both double quotes and single quotes inside the line, be careful with that, and I think that the < and > signs have to be in double quotes. Here's my full code:

     ----/js/sidebar.js----
document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");
document.write("<div id='sidebar'>");
if (page==1) { var p=" style='text-decoration: underline;'" } else { var p=" style='text-decoration: normal;'" }
if (page==2) { var pp=" style='text-decoration: underline;'" } else { var pp=" style='text-decoration: normal;'" }
if (page==3) { var ppp=" style='text-decoration: underline;'" } else { var ppp=" style='text-decoration: normal;'" }
if (page==4) { var pppp=" style='text-decoration: underline;'" } else { var pppp=" style='text-decoration: normal;'" }
if (page==5) { var ppppp=" style='text-decoration: underline;'" } else { var ppppp=" style='text-decoration: normal;'" }
document.write("<p><"+'a href="http://brandonc.handcraft.com/"'+p+">Home</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/about"'+pp+">About The Author</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/sevenmages"'+ppp+">The Seven Mages</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/comment"'+pppp+">Leave A Comment</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/calender"'+ppppp+">Calender</a></p>");
document.write("</div>");

     ----In place where you want code to go----
<script>var page=5</script>
<script type="text/javascript" src="/js/sidebar.js"/>

Probably not the most efficient, and I'd defiantly recommend using PHP like in the other answers, but this works for me and doesn't need a .php after every url.

score 0 · Answer 9 · answered Dec 14 '16 at 13:01

Simply use jQuery .load(). It is very easy to use. Here's an example

navbar.html

<div>This is the navigation bar</div>

index.html

<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>

<!--HEADER-->
<div id="nav-container"></div>
<!--HEADER-->

<p>This is the homepage.</p>
<script type="text/javascript">
$(document).ready(function() {
$('#nav-container').load('header.html');
});
</script>
</body>
</html>

about.html

<!DOCTYPE html>
<html>
<head>
<title>About Page</title>
</head>
<body>

<!--HEADER-->
<div id="nav-container"></div>
<!--HEADER-->

<p>This is the about page.</p>
<script type="text/javascript">
$(document).ready(function() {
$('#nav-container').load('header.html');
});
</script>
</body>
</html>

How can I make my navi-bar the same across my html?

9 Answers9

Linked

Related