CSS/Javascript Menu

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Smackie
Forum Contributor
Posts: 302
Joined: Sat Jan 29, 2005 2:33 pm

CSS/Javascript Menu

Post by Smackie »

Hello i am looking for a CSS/Javascript menu where you can click and it will slide down and have more chooses like this menu on this site

http://www.seawolves.org/ssn/

i know the codes i dont know the CSS part im not really good with CSS right now been looking at a few sites on learning CSS but please someone help me

Thank you
Smackie
User avatar
wtf
Forum Contributor
Posts: 331
Joined: Thu Nov 03, 2005 5:27 pm

Post by wtf »

Hi...

Not really a DOM expert but I'm trying. I hope this helps.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script language="javascript">

var lastOpen = "undefined";

function showOptions(e) {
	if(lastOpen != "undefined") {
		document.getElementById(lastOpen).style.display = "none"
	}
	document.getElementById(e).style.display = "block";
	lastOpen = e;	
}
</script>
</head>

<body>


<div id="a1">
	<span onClick="showOptions('l1')">text 1</span>
	<ul id="l1" style="display:none">
		<li>item 1</li>
		<li>item 1</li>
		<li>item 1</li>
		<li>item 1</li>
		<li>item 1</li>								
	</ul>
</div>

<div id="a2">
	<span onClick="showOptions('l2')">text 1</span>
	<ul id="l2" style="display:none">
		<li>item 1</li>
		<li>item 1</li>
		<li>item 1</li>
		<li>item 1</li>
		<li>item 1</li>								
	</ul>
</div>

<div id="a3">
	<span onClick="showOptions('l3')">text 1</span>
	<ul id="l3" style="display:none">
		<li>item 1</li>
		<li>item 1</li>
		<li>item 1</li>
		<li>item 1</li>
		<li>item 1</li>								
	</ul>
</div>

<div id="a4">
	<span onClick="showOptions('l4')">text 1</span>
	<ul id="l4" style="display:none">
		<li>item 1</li>
		<li>item 1</li>
		<li>item 1</li>
		<li>item 1</li>
		<li>item 1</li>								
	</ul>
</div>




</body>
</html>
Post Reply