Questions about Drop-down Menu

[DoubleDee]

Here is a link to a Test Page of mine…

Fluid Center & Fixed Right Column with Max-Min Sticky Footer

I have some questions about the Top Menu…

QUESTIONS:

1.) Is there a way to make the Sub-Menu wider than the Main Menu Item?

For example…

[B][COLOR="Blue"]News[/COLOR][/B] | Business | Sports | Politics
[COLOR="Blue"]Current
Global
A wide News Sub-Item
An even wider News Sub-Item[/COLOR]

If so, how?

2.) Is there a way to make the Main Menu “fluid” so that its width will adjust to fit each Main Menu Item?

News | Business | [B]Some really really wide Category[/B] | Sports | Politics

3.) Is there a way to make just the Sub-Menus “fluid” so that their width adjusts to the widest Sub-Menu Item?

---

When I was getting help with this several weeks ago, I recall some people saying that the Main Menu and Sub-Menu Items had to be fixed width and I find that hard to believe?!

Thanks,

Debbie

[dresden_phoenix]

1. Actually, since the sub-menu is most likely being AP’ed… you have to give it explicit width #topMenu li ul {width:15em}, for example. if you want it to even be wider than 100% of its parent.

2. get rid of this #topMenu li {width:14%;}

3. not without some sort of .js help. The problem is the sub menu item ALREADY ARE stretching to the width of the longest LI. But because their contain UL can only go as wide as the last relatively positioned element which contains it (in other words: it’s #topMenu li that limits 100% of #topMenu li ul) thus the lines SEEM to be wrapping around.

[dresden_phoenix]

lemme retract something i said earlier. I was playing around with this some more.
absolute positioning does cause shrink wrapping and it will cause a line break, by default, at the width of its position:relative ancestor. HOWEVER, if you set each sub-menu item to white-space:nowrap; you can achieve your desired results for menus, for all practical purposes

[PaulOB]

It is more difficult but you can have a fluid top and fluid submenu also.

This is a very old example that shows a fluid menu in action. As Dresden said the main trick is to use white-space:nowrap to pus the sub menu wide. The tricky part is then making all the other sub menus maintain that same width with rollover.

Here’s a newer example (done last week in a similar forum question) but has a fixed width top menu but doesn’t bother with full width rollovers.

[DoubleDee]

@dresden_phoenix

lemme retract something i said earlier. I was playing around with this some more.
absolute positioning does cause shrink wrapping and it will cause a line break, by default, at the width of its position:relative ancestor. HOWEVER, if you set each sub-menu item to white-space:nowrap; you can achieve your desired results for menus, for all practical purposes

Yep, that fixed my main problem which was that sub-menu items tend to be much wider than the top menu items.

The only problem now is that I have this annoying “jog” when I hover over a wider sub-menu item. :-/ (Because hover is bolded the sub-menu expands. How can I fix that?)

Thanks,

Debbie

[DoubleDee]

@Paul_O_B

It is more difficult but you can have a fluid top and fluid submenu also.

This is a very old example that shows a fluid menu in action. As Dresden said the main trick is to use white-space:nowrap to pus the sub menu wide. The tricky part is then making all the other sub menus maintain that same width with rollover.

Here’s a newer example (done last week in a similar forum question) but has a fixed width top menu but doesn’t bother with full width rollovers.

Paul, the white-space:nowrap solved my main issue.

Back to the “fluid” top menu, I didn’t see from your code how you accomplish that?

Before you respond, let me clarify some things… (And admit I’m not entirely sure what I want?!)

Like most things in life, my Main Menu Items will not all be the same (width). And I think it looks weird to have different spacing between things, e.g.

Home | News | Investing & Markets | Sports | World Events | Opinion

Admittedly I should strive to keep things similar width for aesthetics, but that isn’t always possible.

So I figured that have a fluid Top Menu would help with that.

However, to further complicate things, I’ve got this fancy Min-Max Layout that you helped me created. So that means that my Top Menu cannot be wider than 760px in its narrowest incarnation. (I don’t expect this to be an issue, though.)

I can probably just “Word Craft” - is that the term Rayzur uses? - my Main Menu Items and find a sensible fixed width, but who knows?!

For the Sub-menu, however, I do want/like the “wider than the parent look”, because Sub-Menu Items by there more specific nature tend to be wider.

(If I can jet that “jog issue” fixed, I’m probably good for now, yet I’ve beenl “bitten by the fluid bug”!!)

Thanks,

Debbie

[PaulOB]

To make the top level fluid just remove the width that you have on the list and add some padding or margin to space them out a little.

For the drop down you should never really make elements bold on hover because they take up more space and cause a reflow. You may be able to add padding and then take it away to offset the difference but its still not a good idea.

e.g.

#topMenu li ul li{
   [B] padding:0 13px;
    float:none;
    display:block[/B]
}
[B]#topMenu li ul li:hover{padding:0 5px}[/B]
#topMenu li ul li:hover a{
    color: #FFF;                                                        /* White */
    text-decoration: underline;
    font-weight: 700;
[B]    float:none;
    display:block[/B]
}

[DoubleDee]

@Paul_O_B

To make the top level fluid just remove the width that you have on the list and add some padding or margin to space them out a little.

For a Top Menu, which do you think is better? Fixed-Width or Fluid?

Would it be better for me to craft Categories that are the same length so that I don’t need a fluid Top Menu?

Also, is it bad to have two-menu menu items like “Business Strategies”? (If I don’t add borders around things, it probably looks confusing.)

For the drop down you should never really make elements bold on hover because they take up more space and cause a reflow. You may be able to add padding and then take it away to offset the difference but its still not a good idea.

So the extra emphasis is over-kill?

Oh, one last issue…

When you hover over Sub-Menu Items, the hover background is only as wide as the text?!

I tried making the LI’s “block” with the hopes that would make the background shade the entire width, but that didn’t work.

Thanks,

Debbie

[PaulOB]

@DoubleDee

Oh, one last issue…

When you hover over Sub-Menu Items, the hover background is only as wide as the text?!

I tried making the LI’s “block” with the hopes that would make the background shade the entire width, but that didn’t work.

Thanks,

Debbie

I gave you the fix to that in my last post because I noticed that happening

[PaulOB]

@DoubleDee

For a Top Menu, which do you think is better? Fixed-Width or Fluid?

It depends if menu item lengths are similar or not. If they are pretty close then an equal width is ok but if some words are much longer than others then a fluid width with a margin separating them is probably better.
[/quote]

Also, is it bad to have two-menu menu items like “Business Strategies”? (If I don’t add borders around things, it probably looks confusing.)

As long as the gap between the other items is reasonable then it shouldn’t look confusing but perhaps a border between items would help.

So the extra emphasis is over-kill?

Not always , the main problem is the page re-flow when an element becomes bold. If you have a fixed width then this wouldn’t matter as the width isn’t dictated by the content.

I prefer the background to change color but not the bold effect though.

[DoubleDee]

@Paul_O_B

I gave you the fix to that in my last post because I noticed that happening

OOPS!! Sorry, I was up until 4:30a.m. again, so my brain is still waking up!

Thank you Paul!

Debbie

[DoubleDee]

@Paul_O_B

It depends if menu item lengths are similar or not. If they are pretty close then an equal width is ok but if some words are much longer than others then a fluid width with a margin separating them is probably better.

As long as the gap between the other items is reasonable then it shouldn’t look confusing but perhaps a border between items would help.

Not always , the main problem is the page re-flow when an element becomes bold. If you have a fixed width then this wouldn’t matter as the width isn’t dictated by the content.

I prefer the background to change color but not the bold effect though.

Okay, I’ll let it set for a while and come back to it later today and play around and see what looks best.

(It might help if I had my menu choices finalized!!)

Thanks as always, Paul!

Debbie

[Angrypoonani]

I agree background color change and text color change looks very professional. I am opposed to hover bolding.

Your dropdown menus look very nice