Simple Clickable Drop-down Menu

Hi,

I'm trying to create a simple clickable drop down menu. The reason is because tablet viewports are moving into desktop viewports (and there are many desktop with touchscreens).

I've seen > used. Anywhere that explains how it works? Is there a better way that works on all devices?

Basically I want:

<nav>
<ul>
<li><a href="#">Link</a></li>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<li><a href="#">Link</a></li>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</ul>
</nav>

Code (markup):

Thank you for any help.

 

Well, setting aside the HTML 5 code bloat with the idiotic redundant NAV tag (not a fan in case you couldn't guess) it would first help if you had VALID markup -- your lack of indentation in your code block probably being a contributor to that. A UL cannot be the child of a UL, you need it inside an LI. I ASSUME those are your flyouts, in which case I SUSPECT your markup should be more like this:

<ul id="mainMenu">
	<li>
		<a href="#">Link</a>
		<ul>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
		</ul>
	</li><li>
		<a href="#">Link</a>
		<ul>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
		</ul>
	</li>
</ul>

Code (markup):

When you say ">" I assume you mean the CSS 2 "child selector" -- which basically means targeting the direct children of the element instead of ALL children. Using the menu code I just posted, "#mainMenu>li" would target the two outermost LI, but none of the LI inside the UL inside the LI, while "#mainMenu li" would target ALL LI inside #mainMenu.

Used to be we avoided using the child selector because IE6 didn't support it. If you don't care about a decade and a half old browser, go ahead and use it now... though really in most cases you shouldn't actually need it unless you're getting too complex for your own good.

... like making clickable dropdown menu garbage in the responsive layout age -- usually a case of trying to shoe-horn too many links into a menu and pissing on accessibility. Best way of doing it? DON'T!

 

It was just a quick (bad) example! I'm editing Wordpress's output. The client wants it no matter what... So the child selector will work? I don't have any iOS tablet devices or desktop touch screens to test it on.

 

You shouldn't need one - use chrome's emulation modes to set the screen size... you won't be able to do fancy gestures, but if all you are testing is a "click to open" you won't need that.

... and yeah, as long as you don't care about IE6/earlier, go ahead and use the child selector, though you shouldn't actually NEED to use it if your markup makes any sense whatsoever.

Though you said turdpress, so sensible markup is either out the window entirely or you're stuck spending the next six months trying to bend that disaster over the table and make it your *****.

 

I'm no fan of wordpress either, but it's not THAT hard to make it output decent code - it just involves making your own template (overriding built-in functions in your own functions.php) and also, depending on which plugins you use, overriding those too, since they more often than not output horrible, horrible code.

 

How would I change the markup so that the first touch brings out the flyout without executing the link?