Create vertical Drop-Down menu

[Gaijin]

Welcome and Enjoy!

Intro:
In this tutorial I decided to show you how to create drop-down menu with javascript.

Files:

• menu.htm
  
• drop.js
  

Writing JavaScript:
We start off by creating our menu variables.

Code:

var mainMenu = new Array();
mainMenu['first'] = new Array();
mainMenu['first']['Home'] = 'index.htm';
mainMenu['first']['Forum'] = 'forum.htm';

mainMenu['second'] = new Array();
mainMenu['second']['SubHome'] = 'sub.htm';
mainMenu['second']['Forum'] = 'forum.php';

mainMenu['third'] = new Array();
mainMenu['third']['SubThird'] = 'sub.htm';
mainMenu['third']['SubLink'] = 'forum.php';

We create mainMenu as a global variable and as array, next step is to define our links.

Code:

mainMenu['first'] = new Array();

We define array member "first" as new array to hold our link for the menu with the id "first".
And then we create new links by adding new memebrs to our array "mainMenu['first']".

Code:

mainMenu['first']['Home'] = 'index.htm';

Now "first" is used to identify our category for the link list, "Home" is used as a link text and the whole variable holds the path where the link should go,
in this case "index.htm".

Now let us define a variable to control status of the current open menu.

Code:

var menuLast = null;

Now we can start writing our function to open menu.

Code:

function dropdownMenu(menuID) {
    if(menuLast != null) {
        closeMenu(menuLast);
    if(menuLast == menuID) {
        menuLast = null;
        return 1;
    }
    }
    
    var subMenu = document.createElement('div');
    subMenu.setAttribute('id', 'subMenu');
    
    for(aIndex in mainMenu[menuID]) {
    var subLink = document.createElement('div');
    subLink.innerHTML = '<a href="' + mainMenu[menuID][aIndex] + '">' + aIndex + '</a>';
    subMenu.appendChild(subLink);
    }
    
    var parentMenu = document.getElementById(menuID);
    parentMenu.appendChild(subMenu);
    
    menuLast = menuID;
}

The first line is a conditional statement with wich we are checking if "menuLast" isn't null, if it's
not null that means that a menu is open and we call a function to close it.
The next "if" condition we use to check if the menu that was called is already open, if it's open we set "menuLast" to null and end
the function with "return 1;"

In the next step we create new "DIV" element using javscripts "DOM" function createElement, and we set the id
of the element to "subMenu".
This will hold our sub links.

Code:

var subMenu = document.createElement('div');
subMenu.setAttribute('id', 'subMenu');

With the next part of code we are doing a loop trough our menu list, and again we use the DOM function to create new div element and the populate
it's conetent with the "innerHTML" parameter.
With "subMenu.appendChild" we add our newly created element "subLink" to the subMenu.

Code:

for(aIndex in mainMenu[menuID]) {
    var subLink = document.createElement('div');
    subLink.innerHTML = '<a href="' + mainMenu[aIndex] + '">' + aIndex + '</a>';
    subMenu.appendChild(subLink);
}

Now we use "document.getElementById()" to get the parent category for our drop down box.
And then we append our subMenu to our parent.

Code:

var parentMenu = document.getElementById(menuID);
parentMenu.appendChild(subMenu);
    
menuLast = menuID;

And we lastly define "menuLast".

Now the function to close the drop down box.

Code:

function closeMenu(menuID) {
    var menu = document.getElementById(menuID);
    var subMenu = document.getElementById('subMenu');
    
    menu.removeChild(subMenu);
}

We use "getElementById()" to get our open menu parent, and then we use the same function to get our
opened menu.

With the DOM function "removeChild()" we remove it from our parent (menu).

So far so good, now the html

Code:

<div id="menu">
    <div class="menuItem" id="first">
        <div class="mainLink" onmouseup="dropdownMenu('first');">First</div>
    </div>
    <div class="menuItem" id="second">
        <div class="mainLink" onmouseup="dropdownMenu('second');">Second</div>
    </div>
    <div class="menuItem" id="third">
        <div class="mainLink" onmouseup="dropdownMenu('third');">Third</div>
    </div>
</div>

Source (Click to View)

HTML

Code:

<html>
    <head>
        <title>Drop-Down Menus</title>
                <link rel="stylesheet" href="drop.css" type="text/css" />
        <script language="javascript" src="drop.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="menu">
            <div class="menuItem" id="first">
                <div class="mainLink" onmouseup="dropdownMenu('first');">First</div>
            </div>
            <div class="menuItem" id="second">
                <div class="mainLink" onmouseup="dropdownMenu('second');">Second</div>
            </div>
            <div class="menuItem" id="third">
                <div class="mainLink" onmouseup="dropdownMenu('third');">Third</div>
            </div>
        </div>
    </body>
</html>

JavaScript

Code:

var mainMenu = new Array();
mainMenu['first'] = new Array();
mainMenu['first']['Home'] = 'index.htm';
mainMenu['first']['Forum'] = 'forum.htm';

mainMenu['second'] = new Array();
mainMenu['second']['SubHome'] = 'sub.htm';
mainMenu['second']['Forum'] = 'forum.php';

mainMenu['third'] = new Array();
mainMenu['third']['SubThird'] = 'sub.htm';
mainMenu['third']['SubLink'] = 'forum.php';

var menuLast = null;
var menuOpen = null;

function dropdownMenu(menuID) {
    if(menuLast != null) {
        closeMenu(menuLast);
        if(menuLast == menuID) {
            menuLast = null;
            return 1;
        }
    }
    
    var subMenu = document.createElement('div');
    subMenu.setAttribute('id', 'subMenu');
    
    for(aIndex in mainMenu[menuID]) {
        var subLink = document.createElement('div');
        subLink.innerHTML = '<a href="' + mainMenu[aIndex] + '">' + aIndex + '</a>';
        subMenu.appendChild(subLink);
    }
    
    var parentMenu = document.getElementById(menuID);
    parentMenu.appendChild(subMenu);
    
    menuLast = menuID;
}

function closeMenu(menuID) {
    var menu = document.getElementById(menuID);
    var subMenu = document.getElementById('subMenu');
    
    menu.removeChild(subMenu);
}

And some css
drop.css

Code:

#menu {
    width:120px;
    border:1px solid black;
}

.menuItem {
    cursor:pointer; cursor:hand;
    margin-bottom:2px;
}

#subMenu {
    margin-left:4px;
}

---

Thank you for reading!

[Gaijin]

This is just a BUMP, but hell if no one likes it... well that's ok.