• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 474
  • Last Modified:

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

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.

Thanks!
0
dbaGrant
Asked:
dbaGrant
2 Solutions
 
DubouxCommented:
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:
<style>
body {
     background: #999999 url('relative-url-to-image.jpg') 50% 50% fixed no-repeat;
}
</style>

Then you wouldn't need a div on top of it ;)
0
 
DubouxCommented:
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:

<script>
var button_down = 2;  // If related button of this page is the 2nd button
</script>
0
 
David S.Commented:
I suggest you read Reasons to Avoid Frames and iFrames:
http://www.dynamicsitesolutions.com/html/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.
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
dbaGrantAuthor Commented:
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. :)
0
 
dbaGrantAuthor Commented:
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!
0
 
KenAdneyCommented:
0
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

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now