SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Questions about Drop-down Menu

    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...

    Code:
    News | Business | Sports | Politics
    Current
    Global
    A wide News Sub-Item
    An even wider News Sub-Item
    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?

    Code:
    News | Business | Some really really wide Category | 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

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,823
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,823
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

    Code:
    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

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

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

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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.

  11. #11
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,934
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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

  13. #13
    SitePoint Enthusiast Angrypoonani's Avatar
    Join Date
    Mar 2011
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree background color change and text color change looks very professional. I am opposed to hover bolding.

    Your dropdown menus look very nice


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •