Grow your CSS skills. Land your dream job.

New to JS

  • # December 24, 2009 at 12:03 pm

    Hi Im having trouble with this example of JS menu. can someone look over my code I can’t see what’s wrong.

    HTML file

    CSS FILE "style.css"

    Code:
    /* The whole menu */
    #menu {
    position: absolute;
    }

    /* each menu name */
    #menu li {
    float: left;
    list-style-type: none;
    padding-right: 20px;
    width: 100px;
    background-color: silver;
    }

    /* The entire submenu */
    #menu li ul {
    background-color: silver;
    margin: 0px;
    padding: 0px;
    }

    /* each submenu item */
    #menu li ul li {
    padding: 0px;
    margin: 0px;
    float: none;
    list-style-type: none;
    width: 80px;
    }

    JAVASCRIPT FILE "dropdown.js"

    Code:
    // global variables for timeout and for current menu
    var t=false, current;
    function SetupMenu(){
    if (!document.getElementsByTagName) return;
    items=document.getElementsByName(“li”);
    for (i=0; i if (items[i].className != "menu") continue;
    // setup event handlers
    thelink=findChild(items[i],"A"); // try lowercase
    thelink.onmouseover=ShowMenu;
    thelink.onmouseout=StartTimer;
    // is there a submenu?
    if (ul=findChild(items[i],"UL")) { // try lowercase & == instead of =
    ul.style.display="none";
    for (j=0; j ul.childNodes[j].onmouseover=ResetTimer;
    ul.childNodes[j].onmouseout=StartTimer;
    }
    }
    }
    }

    // find the first child object of a particular type
    function findChild(obj,tag){
    cn = obj.childNodes;
    for (k=0; k if (cn[k].nodeName==tag) return cn[k];
    }
    return false;
    }

    function ShowMenu(e){
    if (!e) var e = window.event;
    // which link was the mouse over?
    thislink = (e.target) ? e.target : e.srcElement;
    ResetTimer();
    // hide the previous menu, if any
    if (current) HideMenu(current);
    // we want the LI, not the link
    thislink = thislink.parentNode;
    current=thislink;
    // find the submenu, if any
    ul = findChild(thislink,"UL"); // try lowercase
    if(!ul) return;
    ul.style.display="block";
    }

    function HideMenu(thelink){
    // find the submenu, if any
    ul = findChild(thelink,"UL"); // try lowercase
    if (!ul) return;
    ul.style.display="none";
    }

    function ResetTimer(){
    if (t) window.clearTimeout(t);
    }

    function StartTimer(){
    t = window.setTimeout("HideMenu(current)",200);
    }

    // set up the menu when the page loads
    window.onload=SetupMenu;

# December 24, 2009 at 12:06 pm

forgot to mention you’ll see comments like "lowercase" etc. that’s where I was trying some changes to fix, but nope

# December 24, 2009 at 7:56 pm

Is is posible for you to start using jQuery? It’s way more easy and efficient way to create these kind of effects on your website.

# December 24, 2009 at 9:46 pm

the thought did cross my mind, but the documentation is so obtrude. I’ll look into it. thx

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".