Jump to content
aberdeen-music

a neat shortcut to expandable CSS menu (subs)


lepeep
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...