Dropdown menus w/o JavaScript -- what is best approach?

what is best approach for css-only dropdown menus w/o JavaScript?

thank you…

Assuming you can learn from example…

Basically do (pseudo)

ul li /li /ul

Then set the inner ul to absolute position, left:0; top:whatever, margin-left:-999em; and on ul li:hover, set the inner <ul> to margin-left:0;

That example should help you.

Paul’s is okay but too old: it sux0rz for keyboard users.

The menu on this web site: www.motorrijschoolemo.nl has Javascript to improve the keyboarder (and shakey-mouser) experience, but without JS it does still work, even with keyboard (without Javascript it does not work in IE6, and it does not work on touchscreen phones… however both cases are fixed by having the top-level links actually go to page who then contain the same links as the dropdown menu… which makes the menu pretty much entirely accessible from a device standpoint. The colour contrast and small font size, though, may knock it off the “AAA Accessible” tower).

I’ve built one that is a mega-menu (so the child who appears on :hover is a div, not a submenu… so multiple submenus can be children in this div) but I haven’t completely finished testing it everywhere: stommepoes.nl/Daniel/polywood.html (also hasn’t been changed from the client’s original text!! Eventually will be turned into Slipsum.com or something).

Dropdowns in general kinda suck donkey balls though. I try to avoid them, unless I need to show off to other front-end developers who like shiny and might hire me.

It doesn’t really answer your question, but I wouldn’t be aiming to avoid js to begin with.
Using javascript for dropdowns is the best approach I’ve seen.

I would look to avoid Javascript to begin with.

Always add with Javascript, never start with it. Progressive enhancement ftw! =p

The standard method for menus are nested list. As far a drop downs , that depends on what kind of drop down you want.

The following example is a 3 level menu, drop down->fly-out. Pure CSS. For IE7+, and generally acessible, I think…:).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
		<style type="text/css">
		ul a {display:block; padding:10px;}
			li {float: left; list-style: none; }
			li li{float:  none; position: relative }
			ul {background: pink; overflow: hidden; padding:0}
			li ul, li:hover ul ul  {background: orange; position: absolute;  top:100%; left:-9999em; overflow: visible   }
			div {position: relative}
			li:hover ul{left:auto; color:red; }
			li:hover  {background: orange}
			li li:hover  {background: pink}
			li  li:hover  ul{left:100%; top:0;  color:red;    background: tan; z-index: 10; width:100%}

<ul class="nav" >
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item longer sample item</a></li>
	<li><a href="#">item</a>
			<li><a href="#">item</a></li>
			<li><a href="#">item</a></li>
			<li><a href="#">test</a>
					<li><a href="#">sub</a></li>
					<li><a href="#">sub</a></li>
					<li><a href="#">sub</a></li>
					<li><a href="#">sub</a></li>
					<li><a href="#">sub</a></li>
			<li><a href="#">item longer sample item</a></li>
			<li><a href="#">item</a></li>

It’s basic… but it should give you something to go from.

Sorry Stomme, I didn’t feel like coding up an example at the time so I figured Pauls site would be a good place to grab one.

Surprisingly, that was the only simple nav example he had on his site, at least from what I saw o.O.

This one is a better one:


But you don’t visually see the results of keyboard navigation. Jason has an example here that has better keyboard support:

(It’s discussed in a thread here.)

Not working for me in IE7, I had mentioned to you once before about IE7 having problems with left:auto;

Ray: I often don’t bother IE with left anything… it seems much happier with playing with the margins (and leaving left at 0) anyways.

How many :focuses are in that code? None : )

When you’re used to keyboarding through web sites, you realise you’re going to be relying a whole lot on the status bar at the bottom (usually) of your browser, and hope the URLs look sensible. There are CMSes out there who like to make every URL look like some kind of freaky salted hash, I think just to screw with those of us who use the addressbar for site navigation : (

I was trying out Crusty’s for a potential answer for someone here on the forums, but the buggy behaviour of all versions of Firefox/Gecko made it a no-go. The submenu items remaining at the top are just way too confusing. Also I had a lot of trouble with variable-length top-level li’s. It worked better with static widths as Crusty has it. So I’ve stuck to the old-fashioned ones for now, at least until Mozilla decides to fix this (it’s likely an ambiguous thing that they don’t consider a bug anyway).

I know, I’ve gone through Paul’s site many times knowing he had some demo of something, but not being able to find it. : ) Paul should hire someone to go through his site, organise stuff into “old” and “current-best” sections and have them all linked on his main page.

You’re both right. The menu should never break because there are no scripts, but for goofy pretty behaviour like dropdowns, Javascript is still necessary to fill in the usability gaps left by CSS. Now eventually I suppose the easing-fading-blah CSS3 stuff will be able to take care of the onmouseoff delays (these assist in usability for anyone with poor mouse control… or just poor mice… or any of those assistive mouse replacements like chin cups…), but having the whole submenu appear for keyboarders… I’ve seen only with a very simple dropdown menu, but not (yet) with a nested set of submenus (Crusty’s would come close if it weren’t for Gecko).

That simple dropdown menu, btw, can be seen at valuedstandards.com. The top right on a desktop-ish wide screen has a menu which cleverly uses :target to make the whole dropdown appear so long as the user has clicked on the “to the menu” link, which goes to #nav, the menu. Quite brilliant, but of course wasn’t designed to be robust on “crappy” browsers. Also he has weird things like li:focus which won’t work.

Yes, I do need to sort that out - I started to tidy it up a few years ago but didn’t get very far.

You’re both right. The menu should never break because there are no scripts, but for goofy pretty behaviour like dropdowns, Javascript is still necessary to fill in the usability gaps left by CSS.

The superfish plug in for the suckerfish type menus adds in good keyboard support and you can tab nicely through the menus and set delays for the fade out to aid poor mouse control etc. Without js the menu is just the basic suckerfish and works in all but ie6.

Too bad that version seems to require a large library (if the menu was all you were using it for, it’s too big). On the other hand, if you want the intents then you’d need all that.