SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31
  1. #1
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)

    Cascading menus -- Is this a new way of doing it?

    I've been working on the first new client page in about two years, mostly as a favor to a friend since I'm still on doctors orders not to be working -- but in the process came up with a way of handling menu fly-outs that I've never seen before... I've dabbled with this approach in the past but I've never seen anyone else use it -- and my former attempts had some issues because I was... well, even I overthink solutions to problems once in a while.

    I've got a demo up here:
    Overflow:hidden menu demo

    The key part of the code is that rather than try to move the APO child menu, or play around with display:none -- I set the parent LI to overflow:hidden... and set it to visible when hovered...

    LITERALLY (cutting out all the fancy anchor and color code):

    Code:
    #mainMenu li {
    	position:relative;
    	float:left;
    	height:32px;
    	overflow:hidden;
    }
    
    #mainMenu li:hover {
    	overflow:visible;
    }
    
    #mainMenu li ul {
    	list-style:none;
    	position:absolute;
    	left:50%;
    	top:32px;
    	width:144px;
    	margin-left:-72px;
    	text-align:center;
    }
    
    #mainMenu li li ul {
    	top:0;
    	left:100%;
    	margin-left:0;
    }
    Is all I had to do for the first drop-down and all the sideways ones -- this means that on child UL's you can state their position:left once and not have to play with adjacent siblings or any of that. I just APO the menus where I want them, and hovering the LI shows them if present...

    The directory for that demo is as always wide open:
    Index of /codeExamples/menuDemo

    Though nothing too fancy in there, the simple CSS, the demo page itself, and good old CSShover3.htc to slap legacy IE into rank and file.

    I've also been testing this against pretty much every browser I can think of... and it seems solid. Lands sake it even works in iCab, Arora and WebPositive.

    Has anyone seen this approach before? I'm curious because I never have, and it seems SO superior to the code I've seen for handling this in the past. It's so... obvious an answer, I'm wondering why I've not seen it before.

    ... and for an old salt like me, something I've not seen before, especially when it comes to CSS, is a rare and special gift.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    That seems to work very well Jason. I can't remember seeing overflow used before for this and usually the other alternatives were visibility or display or position.

    It seems to work well and I had to go back to opera 9 to find a version that had problems (opera 9 shows scrollbars on the lists) but that's not an issue as that is an old version and not used any more.

    I see no problems in IE and others so all in all looks like a tidy solution.

    (I did notice a typo you may want to fix though.)

    Code:
    #pageWrapper {
        width:95%:
        min-width:752px;
        max-width:976px;
    And I would probably have put the zoom on the child anchors rules where you have removed the float rule as the top level already has a layout with the float but that's being very picky.

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Oops on the typo -- guess I belted out the demo too fast.

    Hmm. If I moved the haslayout trigger to the dropdown anchors only, I could set the LI back to auto height and then use the holly hack -- one more property, but at least it would be valid code with no proprietary values... Gotta play with that.

    The Opera 9 behavior is odd, since there is no overflow:auto being set... though I seem to remember that problem from the past where some elements in Opera would show scrollbars "just because".

    Overall though it's odd -- it seems so obvious an answer in hindsight, but I can't seem to find record of this method being used anywhere.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post

    The Opera 9 behavior is odd, since there is no overflow:auto being set... though I seem to remember that problem from the past where some elements in Opera would show scrollbars "just because".
    Yes I don't think there is logical reason for it but luckily its not an issue these days.

    it seems so obvious an answer in hindsight, but I can't seem to find record of this method being used anywhere.
    I'm still surprised to see things I hadn't though of. I think its because we get used to doing things as they have been done before without questioning too much. Usually when I settle on something that's working everywhere I get lazy and just use the same method again without thinking perhaps that there could be a better method. That's why I like the forums and posts like this that question the way things are done.

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Fixed the typo, and made a few other minor tweaks to trim some fat... and the more I think on it the more I think the Opera 9 issue is WHY I didn't use this method in the past... Now that I could give a rats ass about supporting Opera 9, whoo-hoo.

    ... they say memory is the first to go.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,103
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Wow Jason, this is awesome.

    This is the most easily accessible dropdown I've come across. I tried tabbing through the menu, and the result is simply brilliant. And it works a treat with the VoiceOver screen reader on Mac. Will have to get it testd on Windows.

    OK, so we have Suckerfish. What to call this one? The Deathshadow dropdown? Deadfish? Deathdrop? Knightdropper? (We could make a competition out of this!)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    This is the most easily accessible dropdown I've come across. I tried tabbing through the menu, and the result is simply brilliant. And it works a treat with the VoiceOver screen reader on Mac. Will have to get it testd on Windows.
    I didn't even think along accessibility lines -- it's based on hover so FF is going to be a miserable pile of failure, but that's firefox the moment accessibility is on the board in the first place... and I suspect that for keyboard navigators it will be equally bad in Webkit based browsers.

    It does seem to navigate properly in Opera (surprised the dickens out of me!)

    Hmm, I wonder if some of those fancy CSS3 selectors could be leveraged to address the issue. They give us a way for a element to target it's parent yet? (I'll start digging again)

    -- edit -- No, of course not, that would make things too easy and make WAY too much sense. I mean, we have >, why not < ? I mean javascript does have parentNode... Same idea.

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    OK, so we have Suckerfish. What to call this one? The Deathshadow dropdown? Deadfish? Deathdrop? Knightdropper? (We could make a competition out of this!)
    <grissom>Unknown Signature Homicide, Metropolitan Las Vegas.</grissom>

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,103
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    it's based on hover so FF is going to be a miserable pile of failure
    But I'm saying it works really well in FF.

    I mean, we have >, why not < ?
    Very good question. (That would be a lot more useful than some of the other fluffy stuff introduced in CSS3.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,103
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by deathshadow60 View Post
    <grissom>Unknown Signature Homicide, Metropolitan Las Vegas.</grissom>
    Hmm, doesn't quite roll off the tongue.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I just uploaded a new version to give browsers less capable than opera a boot in the patoot with a bit of scripting assistance for keyboard navigation, so the cascading menus actually fly-out in those browsers.

    All whopping 673 bytes of scripting...

    Though it appears to not work properly in FF 4+, though it's great in 3.6-... ah, the struggles.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,103
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hmm, interesting. I kinda liked the way it didn't drop with tabbing but the text just changed. But I guess this would make people happier. (BTW, I was testing in FF 3.6.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I like "deadfish" best

    As Ralph said it's an interesting and usable tab effect in Firefox and webkit.

    -- edit -- No, of course not, that would make things too easy and make WAY too much sense. I mean, we have >, why not < ? I mean javascript does have parentNode... Same idea.
    Ah yes the old parent selector. They've argued over this for years saying that it would be too labour intensive for the way css works. I wouldn't;t be surprised if it eventually surfaces though.

  14. #14
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    As Ralph said it's an interesting and usable tab effect in Firefox and webkit.
    That's actually really funny -- said behavior was unintentional and completely accidental.

    Call it a happy accident?

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    That's actually really funny -- said behavior was unintentional and completely accidental.

    Call it a happy accident?
    It's actually quite neat and unlike absolute elements that are placed off screen and can't be seen when tabbing the elements with overflow are brought into view nicely because the document scrolls them to be visible because they are in the right place to start with.

    Another plus

  16. #16
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Ok, I just split it into two demos, one with the scripting assist, one without.

    Without javascript (apart from htc for IE6-)
    Overflow:hidden menu demo

    With javascript assist for keyboard
    Overflow:hidden menu demo with scripting assist for keyboard

    This is definitely going on my list of "tutorials I need to write".

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,103
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    it's an interesting and usable tab effect in Firefox and webkit.
    Also happens in IE9 and IE8. (I haven't tested other browsers.)

    Off Topic:

    Quote Originally Posted by Paul O'B View Post
    I like "deadfish" best
    Are you suggesting it will start to stink after a while?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  18. #18
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like everyone said, it's a pretty slick method and I like how easy it is to implement.

    So, how to say this without sparking a riot?

    It's a CSS-only menu (except for some basic JS for the keyboard tabbing demo) with nested links so the old frustration of losing your place if you don't move your mouse just right is still alive and kicking.

    Now, there are solutions people have to this *cough* jay kwery hoverIntent plugin *cough* that gives the user a bit of customizable grace.

    Would you consider somehow implementing something similar (perhaps with a pure JS solution)?

    Worse case scenario with JS turned off the user has a fully-functioning CSS-only menu and they have pay extra attention to their mouse. Best case they have a solid dropdown menu with some useful UX experiences built into it.
    "To be truly dedicated to something
    you must be willing to betray it.
    " -SW

  19. #19
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Cascading menus -- Is this a new way of doing it?
    No it's not new, I've seen dropdown hide-n-show done with the overflow property before.

    A quick search on google just turned up this CSS Dropdown tutorial which is identical to what you have done for the hide/show.

    Keep at it though, even if yours wasn't the first it could be the best

  20. #20
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beebs93 View Post
    It's a CSS-only menu (except for some basic JS for the keyboard tabbing demo) with nested links so the old frustration of losing your place if you don't move your mouse just right is still alive and kicking.
    I understand what you're saying about that -- it's why I make mine at LEAST 32px tall per anchor, and real world I'd make them 48px tall. If it's as tall or larger than the cursor itself, it shouldn't be too big an issue.

    Of course if you have enough dropdown items for that to be an issue, it's time to get them out of your menu and find some other way to navigate the site.

    See why while the demo goes to a fourth layer flyout, I'd probably never implement more than the first.

    Though I find the scripted assisted ones in terms of mouse-out delays LESS useful -- since they don't change fast enough for me in most cases... Same reason I hate animated crap on the desktop. I click on minimize I want it gone NOW, not three seconds from now after some stupid "genie" animation. I click on maximize I want it maximized NOW, not after some goofy 'enlarge" animation. I click or mouseover a menu-item, or mouse-out of a menu... Well, you get the idea.

    You could say I'm an impatient sort -- but I don't have a i7 870 with a GTX560 to have my desktop behave like Windows 3.1 on a 386... just as I don't have a 22mbps connection so that pages still take 30-40 seconds to load like I was on dialup.

    You're quite correct though this would make a great foundation for more scripting assist for the people that want it.

    @rayzur -- huh, I spent all last night googling trying to find anyone using it; as I said though, my google-fu failed me... though that method has the idiotic ".submenu" class crap in it... but that figures since it's a wordpress article.

    Which might be why I glossed right past it -- what does turdpress have to do with good code?

  21. #21
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Shadow, nice method, but why not use ems over px?

    BTW, I second "deadFish"!!

  22. #22
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Shadow, nice method, but why not use ems over px?

    BTW, I second "deadFish"!!
    Because EM's on cascading menus is a miserable ***** /FAIL/ thanks to one browser engine.

    GECKO.

    Firefox rounds of EM's willy-nilly, so quite often you end up NOT being able to align the menu's height-wise properly. Just like how it often screws up the meaning of "right" inside fluid and EM containers, it screws up the distance from "top" too -- often making the parent container 1px taller and resulting in the "blur" occuring when you try to move the mouse into the dropdown.

    Which is why for me, as a large font user, SO MANY website menus are just flat out broken/unusable... and why having those parent links point to pages that allow for a drilldown without the flyouts is so important. (and often forgotten).

    In fact, around 80% of menus done in EM end up broken for me as a large font/120dpi user... so while content in %/EM is a "must have" for large font users, it's just asking it to break on menus in most cases.

    Also, usually I have a image background behind them, and %/Em is "instantly broken" when an image interaction is involved... Though CSS3 is looking to change that right quickly. Between the currently undeployable (IMHO) linear-gradient, and the ready for use now background-size, things are starting to look up.

    Really though, it's why while I'm a stickler for EM on CONTENT, for things like menus if you use 14px or larger, I can live with it... just so long as it's not all completely illegible 12px or smaller, it's all good. I'm even willing to forgive PX use on "less important" sidebar content when those sidebars have to be PX width... just so long as the important part of the page -- the big content column, remains dynamic.

    Though since I'm currently Mr. J, wouldn't "clownfish" be better -- NOT that I like using the word "fish" with menus since I think all the "fish" javascripts are absolute rot and don't want to be associated with that trash in the slightest manner. NOT a fan of suckerfish -- hell, I'm not even a fan of having the extra classses in the CSS as per my keyboard version, and might try adding them via script instead.

    Even though my current keyboard assist script looks an awful lot like....

    I am thinking I might adjust my dropdown code for the keyboard to pick up mouse for legacy IE versions too though. Should only add about 400 bytes of code to it.

  23. #23
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Update -- modified the "with script for keyboard" version to detect IE6- and apply the same functions to hover states... so the "with script" no longer needs csshover3.htc to function.

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,103
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Nice work, Jason.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  25. #25
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Nice work, Jason.
    I dunno if I'd go that far

    The script is more complex than suckerfish, when one of the reasons I don't like suckerfish is the scripting...

    Though it does make the CSS a bit easier since the only thing you need to nest for is color inheritance; as opposed to suckerfish where you have to target for positioning.

    I am glad IE6 hover support it didn't end up doubling the code size -- originally I was just going to give them their own scripting then I realized they were doing the same thing as the keyboard nav, so just point onmouseover at onfocus and onmouseout at onblur... duh, simple.


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
  •