Solved

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

Posted on 2009-04-08
6
459 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

920 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

13 Experts available now in Live!

Get 1:1 Help Now