Javascript multi level dropdown menu

Question

HTML code:

<ul class="nav-menu">   
<li id="no" onmouseover="dropDown()" onmouseout="reverseDropDown()">
    <a href="#" >Birds</a>
    <ul class="menu">
        <li id="no2" ><a href="#" onmouseover="dropDown2()" onmouseout="reverseDropDown2()">Ratites</a>
                <ul class="submenu">
        <li><a href="">Ratites</a></li>
        <li><a href="">Fowl</a></li>
        <li><a href="">Neoaves</a></li>
    </ul>
        </li>
        <li><a href="">Fowl</a></li>
        <li><a href="">Neoaves</a></li>
    </ul>
</li>
    <li id="no" onmouseover="dropDown()" onmouseout="reverseDropDown()">
    <a href="#">Dogs</a>
    <ul class="menu">
        <li><a href="">Big</a></li>
        <li><a href="">Red</a></li>
        <li><a href="">Noizy</a></li>
    </ul>
</li>

CSS code:

a {
    color: #06c;
}
ul {
    padding: 0;
    margin: 0;
    background: pink;
    float: left;
}
li {
    float: left;
    display: inline;
    position: relative;
    width: 150px;
    list-style: none;
}

.menu {
    position: absolute;
    left: 0;
    top: 100%;
    background: #ccc;
    display: none;
}

.submenu{
    position: absolute;
    top:0px;
    left:70px;
    background: #ccc;
    display: none;

}

Javascript code:

 function dropDown() {
var submenu = document.getElementById('no').getElementsByClassName('menu')[0];



    submenu.style.display="block";

}


function reverseDropDown(){

  var submenu = document.getElementById('no').getElementsByClassName('menu')[0];
    submenu.style.display="none";
}

 function dropDown2() {
    var submenu = document.getElementById('no2').getElementsByClassName('submenu')[0];



        submenu.style.display="block";

    }

function reverseDropDown2(){

  var submenu = document.getElementById('no2').getElementsByClassName('submenu')[0];
    submenu.style.display="none";
}

JSFiddle: http://jsfiddle.net/wkmd7h0r/33/

I want to make a multi level dropdown menu using javascript ( without libraries such as jquery and without the use of css hover propery, etc).

I have tried in many ways, this is the last one and I can't get it to work. Can someone help me with explanations and/or a tutorial. Cause I did google for one and couldn't find anything except for menus using pure CSS or JQuery.

Thank you.

Your Fiddle works in Firefox? What MORE are you wanting it to do? — Joe Swindell
– Joe Swindell, Commented Nov 6, 2014 at 16:58
@JoeSwindell It doesn't work correctly. For example if you move the mouse on the second link Dogs it won't show the proper submenu. And troubles with the submenu as well. — Codemon
– Codemon, Commented Nov 6, 2014 at 17:08

BananaAcid · Accepted Answer · 2014-11-06 17:15:09Z

2

first of: You should really use event handlers. Separating logic from code (moving all js into an external file).

i've modified it a bit to reflect a possibility (changed HTML, JS, CSS):

full code here jsFiddle

Most important was, to stop triggering the parent A-tags: putting the onclick function on the link, not it's parent li.

function dropDown(a) {
    var li = a.parentElement,
        submenu = li.getElementsByTagName('ul')[0];

    submenu.style.display = submenu.style.display == "block" ? "none" : "block";

    return false;
}

edited Nov 6, 2014 at 17:15

answered Nov 6, 2014 at 17:05

BananaAcid

3,5581 gold badge39 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Codemon Over a year ago

May I ask why do you return false ?

BananaAcid Over a year ago

to stop triggering the default behaviour of the link, making it ignore the content of "href". actually onclick must return false - i just pass it on.

Collectives™ on Stack Overflow

Javascript multi level dropdown menu

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related