...

View Full Version : Drop-down navigation menus



manicman
08-01-2006, 06:42 PM
I am quite new to javascript and I have managed to create some interesting things for my site.

However I would like to create a drop-down navigation bar much like the one found towards the top of this page: www.flyukva.com
The only difference really would be that I would like to have an image for the background not a colour.

Can anyone point me towards an example script or a guide that will show me how to create a navigation menu like that.

cheers, :)

vwphillips
08-01-2006, 07:36 PM
lots about but try this vv simple one


<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">

.over1 {
background-image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);
}

.out1 {
background-image:url(http://www.vicsjavascripts.org.uk/StdImages/Two.gif);
}

</style>
<script type="text/javascript">

var zxcCursor=(document.all)?'hand':'pointer';

function zxcMseOver(obj){
var zxcdivs=obj.getElementsByTagName('DIV');
zxcdivs[1].style.visibility='visible';
zxcdivs[1].style.top=(zxcdivs[0].offsetHeight)+'px';
zxcdivs[0].style.cursor=zxcCursor;
zxcdivs[0].className=zxcdivs[0].className.replace('out','over');
}

function zxcMseOut(obj){
var zxcdivs=obj.getElementsByTagName('DIV');
zxcdivs[1].style.visibility='hidden';
zxcdivs[0].className=zxcdivs[0].className.replace('over','out');
}

</script>

</head>

<body>
<table cellpadding="0" cellspacing="0" border="0" style="z-index:10;" >
<tr>
<td width="110" >
<div style="position:relative;width:100px;height:20px;background-color:#FFFFCC;" onmouseover="zxcMseOver(this);" onmouseout="zxcMseOut(this);" >
<div class="out1" style="position:relative;width:100px;height:20px;background-color:#FFCC66;" >
</div>
<div style="position:absolute;visibility:hidden;top:20px;width:120px;background-color:#FFFFCC;" >
<div style="top:0px;width:120px;height:50px;background-color:red;" >
</div>
<div style="top:0px;width:120px;height:50px;background-color:green;" >
<a href="#" >LINK</a>
</div>
<div style="top:0px;width:120px;height:50px;background-color:blue;" >
</div>
</div>
</div>
</td>
<td width="110" >
<div style="position:relative;width:100px;height:20px;background-color:#FFFFCC;" onmouseover="zxcMseOver(this);" onmouseout="zxcMseOut(this);" >
<div class="out1" style="position:relative;width:100px;height:20px;background-color:#FFCC66;" >
</div>
<div style="position:absolute;visibility:hidden;top:20px;width:120px;background-color:#FFFFCC;" >
<div style="top:0px;width:120px;height:50px;background-color:red;" >
</div>
<div style="top:0px;width:120px;height:50px;background-color:green;" >
<a href="#" >LINK</a>
</div>
<div style="top:0px;width:120px;height:50px;background-color:blue;" >
</div>
<div style="top:0px;width:120px;height:50px;background-color:yellow;" >
</div>
</div>
</div>
</td>
</tr>
</table>

Fred
</body>

</html>

manicman
08-01-2006, 07:47 PM
Thanks, that is just what I was looking for. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum