menu navigation

Discussion in 'JavaScript' started by tweakmy, Aug 26, 2007.

0
  1. #1
    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).getElementsByTagName("ul")
    var litags=document.getElementById(menuids).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="&nbsp;&nbsp;"
    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.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==rltg)
    {
    return;
    }
    }
    var subultags = this.getElementsByTagName("ul")
    for(i=0; subultags.length; i++)
    {
    subultags.sytle.display="none";
    }

    }
    }

    }
    }



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


    </script>
     

    Attached Files:

    tweakmy, Aug 26, 2007 IP