PDA

View Full Version : Javascript menus

Andrew Green
02-17-2006, 04:39 PM
Nice and simple, hopefully easy to understand javascript menu's.

Not the most elaberate system, no nesting, but it is functional and fairly simple (hopefully)

See next post for explanation.

<html>
<head>
<style type="text/css">
a{
color:white;
}
</style>
<script type="text/javascript">
var menuactive = -1
var submenus = new Array()
submenus[0] = "sub1"
submenus[1] = "sub2"


var parmenus = new Array()
parmenus[0] = "par1"
parmenus[1] = "par2"


function menusetup()
{

for (var i=0;i<submenus.length;i++)
{
document.getElementById(submenus[i]).style.cursor="pointer"
}
for (var i=0;i<parmenus.length;i++)
{
document.getElementById(parmenus[i]).style.cursor="pointer"
}

}

function activatesubmenu(z,x)
{


for (var i=0;i<submenus.length;i++)
{
if (z==-1)
{
document.getElementById(submenus[i]).style.visibility="hidden"
document.getElementById(parmenus[i]).style.backgroundColor='transparent'
menuactive=-1
}
if (z==1)
{
if (x==i)
{
if (document.getElementById(submenus[i]).style.visibility=="visible")
{
document.getElementById(submenus[i]).style.visibility="hidden"
menuactive=-1
}
else
{
document.getElementById(submenus[i]).style.visibility="visible"
menuactive=i
}
}
else
{
document.getElementById(submenus[i]).style.visibility="hidden"
}
}
else if (z==0)
{
if(menuactive >-1)
{
if (menuactive!=x)
{

document.getElementById(submenus[menuactive]).style.visibility="hidden"
document.getElementById(submenus[x]).style.visibility="visible"
menuactive=x
}
}
if (x==i)
{
document.getElementById(parmenus[i]).style.backgroundColor='#707070'
}
else
{
document.getElementById(parmenus[i]).style.backgroundColor='transparent'
}

}

}

}

</script>

</head>

<body onload='menusetup()'>


<table id="sub1" style="visibility:hidden;z-index:1;background-color:#000000;position:absolute;top:50px;left:50px ;" cellpadding =" 0px" cellspacing="0px">
<tr><td style="width:250px;height:25px;border:thin solid #b0b0b0;" onclick="parent.location='index.php?action=page1a'" onmouseover="this.style.backgroundColor='#707070'" onmouseout="this.style.backgroundColor='#000000'"><a class="nav2" href="index.php?action=page1a" onClick="return false">Page 1a</a></td></tr>
<tr><td style="width:250px;height:25px;border:thin solid #b0b0b0;" onclick="parent.location='index.php?action=page1b'" onmouseover="this.style.backgroundColor='#707070'" onmouseout="this.style.backgroundColor='#000000'"><a class="nav2" href="index.php?action=page1b" onClick="return false">page 1b</a></td></tr>
<tr><td style="width:250px;height:25px;border:thin solid #b0b0b0;" onclick="parent.location='index.php?action=page1c'" onmouseover="this.style.backgroundColor='#707070'" onmouseout="this.style.backgroundColor='#000000'"><a class="nav2" href="index.php?action=page1c" onClick="return false">Page 1c</a></td></tr>
<tr><td style="width:250px;height:25px;border:thin solid #b0b0b0;" onclick="parent.location='index.php?action=page1d'" onmouseover="this.style.backgroundColor='#707070'" onmouseout="this.style.backgroundColor='#000000'"><a class="nav2" href="index.php?action=page1d" onClick="return false">Page 1d</a></td></tr>
</table>

<table id="sub2" style="visibility:hidden;z-index:1;background-color:#000000;position:absolute;top:50px;left:300p x;" cellpadding =" 0px" cellspacing="0px">
<tr><td style="width:250px;height:25px;border:thin solid #b0b0b0;" onclick="parent.location='index.php?action=page2a'" onmouseover="this.style.backgroundColor='#707070'" onmouseout="this.style.backgroundColor='#000000'"><a class="nav2" href="index.php?action=page1a" onClick="return false">Page 2a</a></td></tr>
<tr><td style="width:250px;height:25px;border:thin solid #b0b0b0;" onclick="parent.location='index.php?action=page2b'" onmouseover="this.style.backgroundColor='#707070'" onmouseout="this.style.backgroundColor='#000000'"><a class="nav2" href="index.php?action=page1b" onClick="return false">page 2b</a></td></tr>
<tr><td style="width:250px;height:25px;border:thin solid #b0b0b0;" onclick="parent.location='index.php?action=page2c'" onmouseover="this.style.backgroundColor='#707070'" onmouseout="this.style.backgroundColor='#000000'"><a class="nav2" href="index.php?action=page1c" onClick="return false">Page 2c</a></td></tr>
</table>

<table style="position:absolute;top:25px;left:50px;height:25px;p adding: 0px 0px 0px 0px;background-color:black" >
<tr>
<td id="par1" style="border-bottom:thin solid #b0b0b0;width:246px;" onClick="activatesubmenu(1,0)" onmouseover="activatesubmenu(0,0)">
<a class="nav2" href="index.php?action=page1&nojava=1" onClick="return false">menu heading</a>
</td>
<td id="par2" style="border-bottom:thin solid #b0b0b0;width:246px;" onClick="activatesubmenu(1,1)" onmouseover="activatesubmenu(0,1)">
<a class="nav2" href="index.php?action=page2&nojava=1" onClick="return false">menu heading</a>
</td>
</tr>
</table>

</body>
</html>
Andrew Green
02-17-2006, 04:46 PM
Ok, one problem when working sith javascript for links is not everyone browses with it turned on. Search engines don't, so everything needs to work even if it isn't on.

parmenus and submenus are a list of the parent menus and submenus you are using.

Menusetup() -> Only gets called if javascript is turned on, and switches the mouse cursor to pointer if it is.

activatesubmenu(z,x) -> when mouse is moved over a menu z=0, this highlights that link and if the menus are active drops it's menu. If they aren't active it just highlights that box. clicking on a parent while the menu is active dissables it. You can also call this to dissable it if someone clicks or moves into the main body.

onClick="return false" -> this is used in each of the links that are a part of the menu. If javascript is active it cancels out the link (so it doesn't process it twice). If javascript is not active it follows the link. The links in the parent menu will only be followed if javascript is not present.

z-index and positions. All the positions of the tables and cells are absolute, meaning they don't get bumped around by other things filling in space. the menus have to have a z-index higher then the rest of the page so that they appear on top of it.