expanded menu

tweakmy · #1 (**permalink**) Aug 27th, 2007, 03:11

Hi to all,
I have one probelm with my javascript and i couldnt find the solution for almost one month already. It may sound medicore for some of the expert here, but i hope somebody can help to resolve my probelm here.

I m trying to build a 4 level hierachi menu with javascript. This menu is supposed to response to the mouse of the user. when the user is not pointing at the menu, then the menu should disappear as simple as that. i can make the menu appear when the mouse is over the menu but when the mouse exit, it should close the menu in a proper way. that means whenever sub hireachi of the menu is not focused by the mouse, the sub menu should dissapper. I hav highlighted my confussion in red for the code below.

Here s my code for the the html page:

<head>
<style type="text/css">
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}

ul1
{
position:fixed;
left:0px
}
.glossymenu li{
position: relative;
}

.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
filter:alpha(opacity=100);
-moz-opacity:1;
}

.glossymenu li a{
background: white url(glossyback.gif) repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}

.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(arrow.gif) no-repeat center right;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(glossyback2.gif);
}

</style>

</head>

<html>
<form name="myform">
<ul1 id="verticalmenu" class="glossymenu">
<li><a href="http://www.javascriptkit.com/">JavaScript Kit</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript Tutorials</a></li>
<li><a href="#">References</a>
<ul>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
<ul>
<li><a href="http://www.javascriptkit.com">345</a></li>
<li><a href="http://www.javascriptkit.com">zys</a>
<ul>
<li><a href="123">123</a></li>
<li><a href="abc">abc</a></li>
<li><a href="efg">efg</a></li>
</ul>
</li>
</ul>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript 123</a>
</li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>

</ul>
</li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >DHTML/ CSS Tutorials</a></li>
<li><a href="http://www.javascriptkit.com/howto/">web Design Tutorials</a></li>
<li><a href="#" >Helpful Resources</a>
<ul>
<li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
</ul>
</li>
</ul1>

</form>
</html>

<script LANGUAGE="JavaScript">

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.

function createcssmenu()
{
for (var i=0; i<menuids.length; i++)
{
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
var litags=document.getElementById(menuids[i]).getElementsByTagName("li")
var altags = new Array()

for (var t=0; t<ultags.length; t++)
{ altags[t]=ultags[t].parentNode
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML="  "
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)

ultags[t].parentNode.onmouseover=function() //this part is already ok
{
this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoff set+"px"
this.getElementsByTagName("ul")[0].style.display="block"

}

ultags[t].parentNode.onmouseout=function(e) //this part is already ok
{
if(!e) e =windows.event;
var rltg = e.relatedTarget;
if(rltg==null)
{
var subultags = this.getElementsByTagName("ul")
for(i=0; subultags.length; i++)
{
subultags[i].sytle.display="none";
}
return;
}
while (rltg.nodeType>1)
{
var rltg=rltg.parentnode
}
if(rltg==this) // ignore if it goes back to same area
{
return;
}
var tgnm = rltg.tagname;
var getelm = this.getElementsByTagName(tgnm)
for (i=0; i<getelm.length; i++)
{
if(getelm[i]==rltg)
{
return;
}
}
var subultags = this.getElementsByTagName("ul")
for(i=0; subultags.length; i++)
{
subultags[i].sytle.display="none";
}

}
}

}
}

if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)

</script>

QuikFrozen · #2 (**permalink**) Aug 28th, 2007, 14:57

Well, using javascript foe such a task is just outdated and way complicated. I'd suggest you choose css for the effect, it'll be easier and would be available to users that have disabled javascript.

karinne · #3 (**permalink**) Aug 28th, 2007, 15:04

wow ... that code you posted is REALLY confusing?!

What's the actual HTML page ... put it in [ code ] ... [ /code ] tags (without the spaces) and what's the JS!?

karinne · #4 (**permalink**) Aug 28th, 2007, 15:05

And like QuikFrozen said, you can use CSS for that

http://www.cssplay.co.uk/menus/

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
css menu	csun	PHP Forum	4	Aug 1st, 2007 20:37
I have a normal css menu, but want ot add drop down menu to it	multichild	Web Page Design	7	Jan 9th, 2007 16:07
Add Sub Menu	DannyP43	JavaScript Forum	10	Sep 3rd, 2006 19:47
CSS menu	cbrams9	Web Page Design	1	Aug 3rd, 2006 15:46
Help with pop-up menu please!!!??	aseriouslyfunkydiva	Graphics and 3D	1	Nov 16th, 2005 15:11

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
expanded menu