What is the "best practice" for handling Navigation bars?

Posted on 2009-04-08
Medium Priority
Last Modified: 2013-12-25
I have a site that I designed in FireWorks (exported to html/javascript) . This site has a "top" navigation bar and the content will load in the bottom area. The bottom area has a background graphic that I can't stretch, so the website itself will be a "fixed" size.

The problem I am having is deciding how to handle including the navigation. I am a bit old school and thought I would just do a two frame site with the nav bar in the top frame and have the links load in the bottom fram (in a scrollable div so it doesn't run off the bottom of the lower background graphic).

This is the first site I have designed in years and I thought I would run these ideas by the experts. Is there a better way to handle this design? Should I NOT use frames, or will I be ok?

Another reason I decided to use frames is I started out using a MasterPage with the nav code in it. Although my javacript would "lose" the status of the nav buttons. For instance, when a button is pressed, it would show the "down" state of the button, then switch pages and the button would "pop" back up since that state was lost to the new page. (Am I making any sense here?)

Any input is greatly appreciated.

Question by:dbaGrant

Expert Comment

ID: 24102693
Frames is fine.

If you're worried about your background picture to dissapear while you scroll down in your bottom frame, just make the background picture fixed.

Have this style in the page that is loaded in your bottom-frame:
body {
     background: #999999 url('relative-url-to-image.jpg') 50% 50% fixed no-repeat;

Then you wouldn't need a div on top of it ;)

Expert Comment

ID: 24102798
And to reply to your button-stuff..

If you'd like to use no frames, you could alter your button-code slightly on every page, making the botton representing the current page look pushed down.
(all kinds of ways to do this, it depends on what your code is)

Or, you make an external .js file with the button-code in it.
and enrich that code with lines like "if (button_down == 4) { ..." for each button line.

If that didn't make any sense, here's a one of thousand ways to show buttons:

// button 1
var class (button_down == 1)  ?  "down"  :  "up";
document.write("<button class=" + class + " value=\"page 1\" />");
// button 2
var class (button_down == 2)  ?  "down"  :  "up";
document.write("<button class=" + class + " value=\"page 2\" />");

Then on every page you include the .js file, and a .css file, where you put stuff in, like this:

/* Not sure if to use inset/outset though */
.down {border: 2px inset gray; }
.up {border: 2px outset gray;}

And on every page you include some javascript like:

var button_down = 2;  // If related button of this page is the 2nd button
LVL 43

Assisted Solution

by:David S.
David S. earned 2000 total points
ID: 24103930
I suggest you read Reasons to Avoid Frames and iFrames:

There are many ways to make navigation buttons maintain their current state. One of the simplest is to use a server-side language, like PHP, to add a class or ID to the active link. It's good to keep common page elements in separate files and include them anyway.
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.


Author Comment

ID: 24106841
I think I will ty to NOT use frames. I have the navigation bar designed in Fireworks and exported to html/javascript. I would like to use this code as is the best way possible. That way when we make design changes we can simply include this code.

Would you suggest master pages or includes to accomplish this? For some reason, I couldn't get the button states to stick when using master pages. I will have to dive in depper to the generated javascript to see how it is handling it...I know this... I am just a bit pressed for time on this site and thought I would check here first. :)

Accepted Solution

dbaGrant earned 0 total points
ID: 24108482
There is a great feature in Fireworks that I was just missing. If you setup your buttons correctly, it will export a page for each button. That page will then have the button in the "down" state and you can include each page in the real page to get your navigation. I am very impressed with this program. The quick mock-up abilities are so useful.

Thanks for all the replies!
LVL 10

Expert Comment

ID: 24227334

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
Before you approach an Ionic Mobile App development company for developing mobile apps using the ionic framework, you must know why you should choose the framework. Let's try to understand that through this article.
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question