PDA

View Full Version : Need help creating a rollover menu



mh18aggie
07-23-2008, 09:34 PM
I've spent the last several hours trying to figure out how to create a menu similar to the ones on hp.com or ibm.com.

What I'm wanting to do is have a navigational bar towards the bottom of the screen that automatically displays additional information about the specific link when each one is moused over.

I want the information to be displayed below the nav menu, in the same container for each link with different text/background color. As I mentioned, I'm wanting it to look exactly like the nav menu at the bottom of the ibm page.

I've been playing with all kinds of scripts but have had little success thus far; If anyone has some suggestions I would be deeply grateful.

Thanks!
Michael

rangana
07-24-2008, 01:46 AM
You might find this basic example useful:


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

mh18aggie
07-24-2008, 02:39 PM
That's perfect! Thanks a ton

mh18aggie
07-24-2008, 08:18 PM
OK I'm starting to understand the concept behind this.

My only remaining question is this; when I try to implement the script into one of my sites, it works just fine until I try and roll over one of the tabs, at which point the entire page goes blank. Does this possibly have something to do with the positioning/z-index?

rangana
07-24-2008, 11:54 PM
That probably has something to do with the reset function I've done. It will set the any div's display to none.

Please provide a link to the page in question so we could have a closer look