a neat shortcut to expandable CSS menu (subs)

lepeep · September 26, 2008

what a long winded title... I've put together a neat wee "expandable" sub menu technique for a CSS ul / li menu....(if it has been developed elsewhere, I've not seen it (honest!))...I thought I'd share it with any CSS developers here...(no Idea if anyone is!)...anyway...

the HTML

<body id="men2">
	<ul>
		<li id="m1">one</li>
			<ul class="subMen">
				<li>1.1</li>
				<li>1.2</li>
				<li>1.3</li>
			</ul>

		<li id="m2">two</li>
			<ul class="subMen">
				<li>2.1</li>
				<li>2.2</li>
				<li>2.3</li>
			</ul>

		<li id="m3">three</li>
			<ul class="subMen">
				<li>3.1</li>
				<li>3.2</li>
				<li>3.3</li>
			</ul>
	</ul>

</body>

the CSS (the very basics - so you can expand on it).

	
.subMen{
	display:none;
}
#men1 #m1 ul, #men2 #m2 ul, #men3 #m3 ul{
	display:block;
}

to "expand" the subs, simple change the BODY id to "men1" or "men2" or "men3" - presto! (you can obviously change the id names to suit, and add more. It's the combination of the BODY id + menu UL id that changes the subMen UL - hope it helps someone. Peep.

lepeep · September 27, 2008

edit - firfox doesn't display that properly, as I'd put the "sub menu" outside the "top level" <li> tag... here's the correct code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><link rel="stylesheet" type="text/css" href="tests.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>tests</title>
</head>

<body id="men1">
	<ul>
		<li id="m1">one
			<ul class="subMen">
				<li>1.1</li>
				<li>1.2</li>
				<li>1.3</li>
			</ul>
		</li>
		<li id="m2">two
			<ul class="subMen">
				<li>2.1</li>
				<li>2.2</li>
				<li>2.3</li>
			</ul>
		</li>
		<li id="m3">three
			<ul class="subMen">
				<li>3.1</li>
				<li>3.2</li>
				<li>3.3</li>
			</ul>
		</li>
	</ul>

</body>
</html>

Sign In

a neat shortcut to expandable CSS menu (subs)

Recommended Posts

lepeep

Link to comment

Share on other sites

lepeep

Link to comment

Share on other sites

Join the conversation

Browse

Activity