PDA

View Full Version : 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 (http://www.dynamicdrive.com/style/csslibrary/item/thick-padding-tabs/)

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
<!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