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

HTML & CSS
1

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


#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

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

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


#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

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

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

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

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!)

7

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

<grissom>Unknown Signature Homicide, Metropolitan Las Vegas.</grissom>

9

But I’m saying it works really well in FF.

I mean, we have >, why not < ?

Very good question. :slight_smile: (That would be a lot more useful than some of the other fluffy stuff introduced in CSS3.)

10

[ot]

Hmm, doesn’t quite roll off the tongue. :lol:[/ot]

11

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

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

13

I like “deadfish” best :slight_smile:

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

That’s actually really funny – said behavior was unintentional and completely accidental.

Call it a happy accident?

15

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

16

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

it’s an interesting and usable tab effect in Firefox and webkit.

Also happens in IE9 and IE8. (I haven’t tested other browsers.)

[ot]

Are you suggesting it will start to stink after a while? :lol: [/ot]

18

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.

19

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

20

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?