Solved

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

Posted on 2009-04-08
6
457 Views
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.

Thanks!
0
Comment
Question by:dbaGrant
6 Comments
 
LVL 3

Expert Comment

by:Duboux
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:
<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
 
LVL 3

Expert Comment

by:Duboux
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:

<script>
var button_down = 2;  // If related button of this page is the 2nd button
</script>
0
 
LVL 42

Assisted Solution

by:David S.
David S. earned 500 total points
ID: 24103930
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:dbaGrant
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. :)
0
 

Accepted Solution

by:
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!
0
 
LVL 10

Expert Comment

by:KenAdney
ID: 24227334
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

708 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now