Navigation recommendations EDIT: need help implementing

[Mal]

http://www.japancpi.com/

I am considering revamping the navigation, right now I have a left navigation menu, and several of the pages linked from there have additional navigation that is composed simply of links on those pages. I think what I'd like to do is have either static or rollover menus across the top, directly underneath the banner, but I'm not sure if there's a better way of doing it. Just looking for ideas.

jW

 

[FourCandles]

For me, a drop down menu directly below the banner would fit perfectly with the look of your site.

The only challenge I can see is from a design PoV: the natural choice of background colour for the menu bar would be gold, continuing the banner colours - but the bottom of your banner image goes from gold to black on the right hand side (i.e. the hill) - so a gold graduated background to the menu bar may look odd. But I'm sure there's a way round that challenge!

 

[Mal]

Yeah, I'm thinking a black background (essentially no background, but that would allow for better visibility in the drop down portions) with the same color text I have now. I just didn't know if there was any other methods of navigation I wasn't really aware of or wasn't thinking about that could work. I'll probably implement a dropdown menu system later today.

jW

 

[Mal]

OK, so I grabbed a bit of very simple code, modified it appropriately (which wasn't much, sizes and colors), but I'm running into two small problems. The first is that the menu isn't quite aligned properly, it's about 3-4px to the left and the first item is about 2px up towards the top.

Secondly, and almost more annoying (I can just get rid of the backgrounds so the spacing isn't as much of an issue), is that the menus, once they drop down, push the rest of the content on the page down instead of laying on top of them like they're supposed to.

Ya'll have helped me a lot in the past, hopefully someone will have some good insights.

Oh yeah, link: http://www.japancpi.com/indexchanging.php

Note: Home link doesn't work, because I changed the link so people wouldn't run across the page accidently.

jW

 

[SrWebDeveloper]

Many of the drilldown/accordian style menus using CSS which involves wacky negative margins and positioning to make them work properly. This often interferes with an existing layout, and some browser quirks come into play.

To fix mis-alignment wrap the whole menu system in a single div in your HTML, then give it an ID such as "menunav_wrapper". Add the ID to your stylesheet, set position to relative then use top and left to reposition, okay to use negative numbers as necessary. Be sure to check this in MSIE and other browsers, and adjust accordingly for them. I suggest doing this vs. changing the menu CSS because you have full control over placement and you won't break any menu CSS. Some of those menu systems use some questionable CSS and when you change something it will affect its behavior somehow. Avoid absolute positioning if possible.

Example:

div#menunav_wrapper {
  position: relative;
  top: -2px;
  left: 3px
}

-jim

 

[Mal]

Thanks for the suggestion, I didn't do it exactly as you said (mostly because I didn't come back and check, just remembered the "wrap in a div" idea, but it's looking correct to me). I also checked it out on browsershots.org and MSIE looks good in all relevant versions. If anyone has a machine they can test it on, that'd be great, but I think until I hear otherwise I'm gonna call this one a success. Thanks all!

jW