View Full Version : Navigation bar that doesn't require it's code on every page, a reference perhaps?

Mike Walker
07-26-2011, 09:43 PM

I was looking for help creating a navigation bar that follows you without requiring the block of code in a div.

My website's navigation bar frequently changes, so I want the nav bar in my CSS or something that I only have to include once. I will continually change the nav bar and adding/changing the images involved seems like a huge pain, since there's so many headings and subheadings.

(I currently have 8 headings in the nav bar composed of extremely specific sized images (92 width, 146 width etc), each with ~5 sub pages inside. To change the nav bar daily (as I may need to do) that's 40 pages of nav bar div to change)

I know this is possible, but here's another question- is it possible to do this and still have a blunt indication or even a different image for the link you're currently on?
(Like, you're in a heading and it is bold, underlined & a different color (using images))

I heard it might be called "java include" but I'm trying to do an html version.

Thanks in advance, I really need help!

07-26-2011, 09:49 PM
I heard it might be called "java include" but I'm trying to do an html version.

You were good just up to the end. There is no way to do this just with html. You can do this with server side languages ("PHP Include" or "SSI" would be good searches), or you can do this with JavaScript, but not just with html.


Mike Walker
07-26-2011, 09:54 PM
Okay thanks! Using your advice and google I came across


Which is specifically what I need!

Now I need to know, is there a way that the include would know which tab it is on, allowing me to highlight in a way?

Like, my headers are "People" "Products"
and you're in "Products" looking at the subcategories, I want the Products button (looks like a square feathered button) to be decompressed.

How would I go about doing that?

Also, my host is GoDaddy, I believe they allow SSI

07-26-2011, 10:07 PM
I don't typically do my navigation this way, but off the top of my head you could distinguish the nav items with css. Like this, for example:

#nav li {color:black}
#about #nav li {color:red}
#contact #nav li {color:red}

And your about, contact, etc pages would start out like:

<body id="about">

Then in the nav code, something like:

<ul id="nav">
<li><a href="about.shtml">About</a></li>
<li><a href="contact.shtml">Contact</a></li>

I haven't tested that, and there may be better ways, but hopefully you'll get the idea.


Mike Walker
07-26-2011, 10:20 PM
I'm still attempting to find a good guide on google,

I had trouble understanding at first, but I kind of get it, the css class would change thus showing the different color background.

Can I change a Included element after it's been included?

Like, have a div at the top that simply has the changed image, and mark it !important (or whatever has that effect for divs)

07-26-2011, 10:45 PM
Spend some time with CSS (http://www.w3schools.com/css/default.asp), that may help.

You can't "change an included element", but you can certainly style an element that's in the included file, just as I've shown above. For example an included <div> element might have a different background-image (e.g. based on the existence of #about, #contact, etc as I've done above).


Mike Walker
07-27-2011, 04:40 PM
Well I thank you very much for the help, but I'm going to need to change an image to a different one. All the links are images...

Plus, I'd need a div-per-link which would be difficult, no?

Maybe I could disable anything inside the div and then make the background image the "pressed" link...

I wonder if that would work out well...

Possible to disable images in CSS?

07-27-2011, 06:00 PM
Yep, "display:none" will hide whatever object it's attached to. So the image could be in a <div> that has display:none until it's being hovered over, for example.