You might find this basic example useful:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{margin:0px;padding:0px;}
#wrap{width:700px;margin:20px auto;border:1px solid #222;
font-family:Verdana,Tahoma,Arial;
font-size:10pt;
padding:0px;
}
ul{list-style-type:none;}
li{float:left;margin:0px;}
a{display:block;background:#9c0;text-align:center;
height:30px;width:100px;
line-height:30px;
text-decoration:none;
color:#222;
}
div{height:300px;padding:5px;}
#div1{z-index:100;display:block;}
a.active,a:hover,a:active{background:#9cf;}
h1{color:#930;}
</style>
<script type="text/javascript">
window.onload=function()
{
reset();
var display=document.getElementById('div1'); // The element you want to display by default
display.style.display='';
for(var i=0,li=document.getElementById('trig').getElementsByTagName('li');i<li.length;i++){
li[i].onmouseover=function(){
reset();
document.getElementById(this.getAttribute('rel')).style.display='';}}}
function reset()
{for(var i=1,divs=document.getElementsByTagName('div');i<divs.length;i++)
divs[i].style.display='none';
}
</script>
</head>
<body>
<div id="wrap">
<ul id="trig">
<li rel="div1"><a href="#" class="active">Link1</a></li>
<li rel="div2"><a href="#">Link2</a></li>
<li rel="div3"><a href="#">Link3</a></li>
<li rel="div4"><a href="#">Link4</a></li>
<li rel="div5"><a href="#">Link5</a></li>
<li rel="div6"><a href="#">Link6</a></li>
<li rel="div7"><a href="#">Link7</a></li>
</ul>
<div id="div1">
<h1>Contents of Div1</h1>
</div>
<div id="div2">
<h1>Contents of Div2</h1>
</div>
<div id="div3">
<h1>Contents of Div3</h1>
</div>
<div id="div4">
<h1>Contents of Div4</h1>
</div>
<div id="div5">
<h1>Contents of Div5</h1>
</div>
<div id="div6">
<h1>Contents of Div6</h1>
</div>
<div id="div7">
<h1>Contents of Div7</h1>
</div>
</div>
</body>
</html>
What's important with the script is the rel attribute in the li tag which denotes to the id of the divs you want to display.
Hope that keeps you going.
Need help creating a rollover menu
Reply With Quote
Bookmarks