I would like to make a enu drop down like this...

**queerfm** · 02-15-2007, 04:38 PM

Hi can some tell me how ninemsn.com.au menu works and if the you can post the code that would be great. Thanks

**codeexploiter** · 02-16-2007, 03:30 AM

I think you are looking for something like this one

You can change the images used in the demo according to your requirements.

**queerfm** · 02-16-2007, 05:52 AM

did you click on any of the menu button if you did then you would see they drop down?

**codeexploiter** · 02-16-2007, 07:19 AM

Code:

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#thicktabs
{
margin: 0;
padding: 0;
float: left;
font: bold 13px Tahoma;
}

#thicktabs li
{
display: inline;
}

#thicktabs li a
{
float: left;
color: black;
padding: 8px 11px; /*padding of tabs*/
text-decoration: none;
background: transparent url(pinkbg.gif) top right no-repeat;
border-top: 1px solid #d3bdbe; /*top border style*/
border-bottom: 3px solid #ffa1a3; /*thick bottom border below tabs*/
}

#thicktabs li a#leftmostitem 
{ /*Extra CSS for left most menu item*/
border-left: 1px solid #d3bdbe; /*left border style*/
}

#thicktabs li a#rightmostitem 
{ /*Extra CSS for right most menu item*/
border-right: 1px solid #d3bdbe; /*right border style*/
background-position: top left; /*Position background image to the left instead of default right, to hide indented underline for this link*/
}

#thicktabs li a:visited 
{
color: black;
}

#thicktabs li a:hover
{
color: black;
background-image: url(pinkbgover.gif); /*background image swap on hover*/
}

#homeDiv
{
	position:absolute;
	top: 60px;
	left: 15px;
	width: 600px;
	border:1px solid blue;
	background-color:#CCFF99;
	height:100px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:14px;
	display:none;
}
#cssDiv
{
	position:absolute;
	top: 60px;
	left: 15px;
	width: 600px;
	border:1px solid blue;
	background-color:#669999;
	height:100px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:14px;
	display:none;
}
#forumsDiv
{
	position:absolute;
	top: 60px;
	left: 15px;
	width: 600px;
	border:1px solid blue;
	background-color:#009999;
	height:100px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:14px;
	display:none;
}
#webmasterDiv
{
	position:absolute;
	top: 60px;
	left: 15px;
	width: 600px;
	border:1px solid blue;
	background-color:#9999FF;
	height:100px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:14px;
	display:none;
}

#jsDiv
{
	position:absolute;
	top: 60px;
	left: 15px;
	width: 600px;
	border:1px solid blue;
	background-color:#666666;
	height:100px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:14px;
	display:none;
}
#galleryDiv
{
	position:absolute;
	top: 60px;
	left: 15px;
	width: 600px;
	border:1px solid blue;
	background-color:#CC9999;
	height:100px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:14px;
	display:none;
}

</style>
<script type="text/javascript">
function showTheDiv(showid)
{
	
	document.getElementById(showid).style.display = "block";
	
	var idArray = new Array("homeDiv","cssDiv","forumsDiv","webmasterDiv","jsDiv","galleryDiv");
	var i;
	
	for(i=0;i<idArray.length;i++)
	{
		if((document.getElementById(idArray[i]).style.display == "block") && (showid != idArray[i]))
			document.getElementById(idArray[i]).style.display = "none";		
	}
	
}
</script>
</head>

<body>
<ul id="thicktabs">
<li><a id="leftmostitem" href="#" onclick="showTheDiv('homeDiv');">Home</a></li>
<li><a href="#" onclick="showTheDiv('cssDiv');">CSS Codes</a></li>
<li><a href="#" onclick="showTheDiv('forumsDiv');">Forums</a></li>
<li><a href="#" onclick="showTheDiv('webmasterDiv');">Webmaster Tools</a></li>
<li><a href="#" onclick="showTheDiv('jsDiv');">JavaScript</a></li>
<li><a href="#" onclick="showTheDiv('galleryDiv');">Gallery</a></li>
</ul>
<p></p>
<div id="homeDiv">This is Home menu target</div>
<div id="cssDiv">This is Css menu target</div>
<div id="forumsDiv">This is Forums menu target</div>
<div id="webmasterDiv">This is Webmaster Tools menu target</div>
<div id="jsDiv">This is JavaScript menu target</div>
<div id="galleryDiv">This is Gallery menu target</div>
</body>
</html>

Just an example try to click on the menu items

**queerfm** · 02-16-2007, 08:27 AM

Works well

Thread: I would like to make a enu drop down like this...

Thread Tools

Search Thread

I would like to make a enu drop down like this...

Bookmarks

Bookmarks

Posting Permissions