Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2009-04-08
6
Medium Priority
?
469 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 43

Assisted Solution

by:David S.
David S. earned 2000 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
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 

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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Ready to get certified? Check out some courses that help you prepare for third-party exams.
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.
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…

610 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