Need CSS help - drop down menu

Factual Questions
1

I don’t why I can’t find a script to do this. Maybe I’m just dense (certainly likely - I’m not really a web designer, although generally I can muddle through.)

I’m hand-coding my page, cuz that’s what I’m used to, but I can’t find a script that I can get to do what I want. Sigh, the jump up from HTML 4 is a big one.

What I want is, I thought, fairly simple. It’s a vertical menu that basically looks like a definition list. I want to be able to click on the titles and for the list entries to appear. I know I’ve seen it done. I don’t want any images or submenus. I’m using this for the archive for my webcomic site. I have two comics and I’d like to be able to display the comic names separately.

The one tricky thing, is that I want the list entries to be color-coded. I already have classes set up in my stylesheet for that.

Any web gurus want to help?

2

Easiest way I do it is…



<html>
<head>
<script language="JavaScript">
	function ShowDiv(iID)
	{
		if (document.getElementById('dv'+ iID).style.display = 'block')
		{
			document.getElementById('dv' + iID).style.display = 'none';
		}else{
			document.getElementById('dv' + iID).style.display = 'block';
		}
	}
</script>
</head>
<body>
<a href="#" onClick="ShowDiv('1'); return false;">Title 1</a><br/>
<div id="dv1" style="margin-left: 5px;">
	Subtitle 1<br/>
	Subtitle 2<br/>
</div>
<br/>
<a href="#" onClick="ShowDiv('2'); return false;">Title 2</a><br/>
<div id="dv2" style="margin-left: 5px;">
	Subtitle 1<br/>
	Subtitle 2<br/>
</div>
</body>
</html>

Make any sense?

3

Doh, just had a thought…

Those DIVs should have the style code style=“display: none;” on default.

Also, if you want to Google for more help, what you want is a DHTML menu not a CSS menu.

4

That should help. I just don’t have the knowledge base I need and I have the sneaking suspicion my teacher knows Dreamweaver and not, y’know, programming. She did appreciate that I was making the effort to do things the right way and not the way I know (honestly, what was wrong with tables? yeah, yeah, people with disabilities, fine…)

DHTML, CSS, Javascript… it’s all the same, right? :smiley:

Thanks so much!

5

This may not serve your purposes, but I was recently browsing around CSS sites and discovered the existence of drop-down menuing systems that use absolutely no scripting to do their job – everything is CSS. It’s kind of impressive. There’s an example here: Stu Nicholls | CSS PLAY | A css only dropdown menu

6

ZipperJJ, your markup should make up its mind as to whether it is HTML or XHTML. It has elements of both but adheres to the standards of neither, and that’s a no-no.

Also, your <script> needs a type attribute.

Sincerely,
Your Friendly Neighborhood W3C Pedant

7

I’ve used this template for a site, and it has drop-down menus implemented in CSS (and the site works in IE6 and latest versions of all other browsers.)

I would imagine that the solution is similar to what ntucker has provided.

8

I use this css dropdown for my sites: PVII Menu Tools