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

March 15, 2013 at 17:50:16
Specs: Windows 7
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?

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

Report •

March 16, 2013 at 11:44:15
Man, this website sucks. Anyways, if you wanna help out with the question you can go to stackover-flow. I have 5 answers and people helping in the comments :P Anyways....

Report •

March 16, 2013 at 23:29:29
✔ Best Answer
Uh, oh. Less than 24 hours between your opening post and your reply...

If PHP is available, I'd suggest just using the Include function (which was largely recommended to you on Stack). It's my go-to option.

1.) Instead of being .html files, they're .php files. Just code them like ordinary HTML files, but add PHP when necessary. Nothing special to it.
2.) I typically organize them by header, menu, content, and footer, and name the main three pages as header.php, menu.php, footer.php
3.) The content page is the one that people are directed to, such as about.php, products.php, etc.
4.) The content page uses PHP includes to pull together the header, menu, and footer.

Examples: header.php
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
#container {width:60%; margin:0px auto}
#header {text-align:center}
#menu {margin-right:5%; float:left}
#content {float:left}
#footer {text-align:center}
.clear {clear:both}
<div id="container">
<h1 id="header">About Page</h1>

<div id="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>

<?php include 'header.php'; include 'menu.php'; ?>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Sed imperdiet diam vel eros sagittis sit amet hendrerit erat auctor.</p>
<p>Morbi lobortis lorem lobortis orci fringilla sit amet volutpat augue mollis.</p>
<?php include 'footer.php'; ?>

<div class="clear"></div>
<div id="footer">Copyright info. 2013.</div>

There you have it, a basic About webpage in PHP/HTML/CSS. Create more content pages and then include the header, menu, and footer. Keep in mind that only the content page needs to be a PHP file because that's the one that actually has PHP code. I made the other 3 PHP files as well because they'll likely get a little PHP too. Just my habit of making them all PHP to begin with.

If PHP is unavailable by your web host, than frames and iframes would likely suit your needs (though I'd just switch hosts). Frames are deprecated in HTML5 and even iframes are frowned upon, but both get the job done and major web browsers will properly render them.

As for the jQuery reference not working in your Stack comment, you did load the jQuery script file, right?

Apologies if I don't respond to your reply immediately. I don't check this site daily, but you're welcome to PM me as a reminder.

Report •
Related Solutions

Ask Question