View Full Version : navigation bar opinions wanted

05-09-2007, 08:21 PM
So I am faced with some navigation issues that I am exploring various options for. On the site I am working on I currently use individual nav buttons instead
of a nav bar. The benefit of originally doing it this way was first, I didn't really know what I was doing (and am still pretty new at all this) so this way was easy enough for me to figure out and secondly, I am able to keep the button in the "down state" to indicate what page the user is on. I also have one button (Galleries button) that does not have a down state in that it only provides a means to give a sub-menu. I did have a bit of a design issue in that for any of the buttons with a sub-menu... if you selected one of those sub-menu options I really didn't have a way to indicate to the end user which page they were on via the buttons. I know this whole method is less common now but I still like it and most of the people who visit my site seem to like it too. I see that most webpages just have a heading at the top of the text for each page that tells you what page you are on and while that is visually pleasing as well, I just still like this button method better. If you want to see how it currently is go here... www.marshallphotonc.com (http://www.marshallphotonc.com)

Now comes the time to make edits and where the issues arise. This site has nearly 80 unique pages where these nav buttons are used. All of this site was created using Dreamweaver Studio 8 (Dreamweaver and Fireworks). Originally I created a template for this site that had the buttons on it so to create a new page I just applied the template to a new file and then I had to sever the link to the template so that I could edit the buttons to indicate which page I was on. Of course now that I need to make a nav change this means a lot more work for me. The change I need to make is to the "Links" button. I need to change the text on it to be "Links & Info" which means the button will need to be wider which means I need to shift all the other buttons to the left on every page too. Also I am adding a sub menu to this button. With the size change I know that the buttons will now be visually unbalanced to the right. So I am considering changing all the buttons to all be the same size and just center the text inside the buttons.

So how to proceed is where I am weighing all my options. I don't know if I can keep the same functionality (keeping the button depressed to indicate the page) with all the various methods of creating a navigation system.

I considered just biting the bullet and editing the buttons and keeping every page as stand alone pages. The thinking is the site has been up for almost 2 years and this is the first change like this I have had to make. So it doesn't happen very often that I need to change it. It will take me a few hours to make the changes on all the pages but again it may be awhile before I have to do it again.

I considered SSI (server side includes). I could create one file and then any future edits would be just to one file basically and then all of the pages would be updated. This is a bit of work now... but would save time in the future. But I don't know if it is possible to keep the button depressed to indicate the current page with that method.

I've read some about this whole CSS method of doing it, but again I am still kinda new at this and I have gotten very confused in trying to figure all that stuff out. The whole thing about not using tables and stuff seems like a cool idea, but I just don't get it. And since I am nothing more than a hack at all this I use the whole WYSIWYG method and work mostly in the design view on Dreamweaver. And again I don't know that I can keep that depressed button thing going with that method.

I don't know much about flash and I don't know much about javascript so I'm not sure if those would be ways of going about it either. Also my visitors tend to be a little less computer savy so if they don't have java enabled on their computer or have a way for the flash to play then I don't want to scare them away or to make my site look "broken".

I'm not looking to re-invent the wheel here. I figure there is some method for doing all of this, but due to my limited knowledge I'm just now sure what it is.

What is the common way of doing this? or does the "button indicating the page" throw a wrench in what is typical?

Any ideas or suggestions... please share!!!

05-10-2007, 01:22 AM
I guess I read what your saying. If you port over to php you could probally do something like this:


Im sure there is a simple ASP way as well.

Best reason to do that is that you can keep the whole navigation in a seperate file and use an include to slap it into each page. that way you make a change on just 1 page and it shows site wide.

The css way is more difficult but if everyting is harcoded all ready...

you can give each page's body tag an ID. then make each menu button have an idea.

you might want to make a different css file for this part, as with 80+ pages it will ge tlong.

body#home a.home {
background-position: top right;

and so on. I didnt look at your code but this assumes your using a "sliding doors" technique.

basically sliding doors is one image as the button set to top left. on hover the position switches to top right as the over state.

with the css above any link with a class of HOME in a page where the Body'd ID is HOME would switch the image to the over state thus highlighting the page your on.


the oho/asp way i think would be alot more efficient as you would have so many pages.