Javascript Menu Tutorial
Dynamic HTML, or DHTML, is the technique of combining JavaScript actions, HTML formatting and CSS style to add interactivity to a web page. One of the most popular applications of DHTML is to create drop-down site navigation menus. Drop-down menus allow you to give your visitors a way to navigate your site easily, provide a lot of links in a compact form and lend your site a professional look and feel.
-
Build the Menu
-
The first step in building a drop-down menu is to build the menu itself. The neatest and most organized way to do this is to use a nested, unordered list. Place each of the main menu elements at the top level of the list. Place each submenu as a list nested in the corresponding main menu list item. For example, here is a menu with two menu items, each with a submenu containing three items.
<ul>
<li>
<a href="item1.html">Menu 1</a>
<ul>
<li><a href="item11.html">Item 11</a></li>
<li><a href="item12.html">Item 12</a></li>
<li><a href="item13.html">Item 13</a></li>
</ul>
</li>
<li>
<a href="item2.html">
Menu 2</a>
<ul>
<li><a href="item21.html">Item 21</a></li>
<li><a href="item22.html">Item 22</a></li>
<li><a href="item23.html">Item 23</a></li>
</ul>
</li>
</ul>
Styling the Menu
-
Now it is time to turn your bulleted list into something that looks like a menu. Create two classes for the unordered lists, "menu" and "submenu," and apply the following styles to the various list tags.
Turn off the list bullets. The z-index is for positioning:
ul.menu, ul.submenu {
list-style: none;
z-index: 5;
}Hide the submenus:
ul.submenu {
display: none;
}Make the main menu display horizontally. Float will cause the menus to drop down correctly:
ul.menu li {
display: inline;
float: left;
}Set the width of each menu item:
ul.menu li, ul.submenu li {
width: 6em ;
}Attach the style classes to the menus, like in the following snippet of the menu HTML code from earlier:
<ul class="menu" id="menu">
<li>
<a href="item1.html">Menu 1</a>
<ul class="submenu" >
...
Styling the Menu Position
-
Wrap the entire unordered list in two div elements, giving them style classes and ids. The ids will be used later to position the menu.
<div class="menucontainer" id="menucontainer">
<div class="menucontent" id="menucontent">
...[menu HTML code]
</div>
</div>
<br clear="all">Add style classes to the CSS code. The height setting will force the page content to wrap correctly around the menu:
div.menucontainer, ul.menu li, ul.submenu li {
height: 1.1em;
}Absolute positioning will cause the submenus to float over the rest of the content of the page. The position will be changed later by the JavaScript:
div.menucontent {
position: absolute;
left: 0px;
top: 0px;
z-index: 3;
}
Setting the Menu Positioning
-
Create a JavaScript script area in the header of the page and add the following code. The function will figure out where the "menu container" div is located and move the menu to that position.
var toppos = 0 ;
var leftpos = 0 ;
function setPosition(){
if(document.getElementById("menucontainer") == null ||
document.getElementById("menucontent") == null){
return;
}
toppos = document.getElementById("menucontainer").offsetTop ;
leftpos = document.getElementById("menucontainer").offsetLeft ;
document.getElementById("menucontent").style.top = toppos + "px";
document.getElementById("menucontent").style.left = leftpos + "px" ;
}Call the setPosition function in your page's body tag:
<body onload="setPosition();">
Adding Menu Functionality
-
Add the following code to the JavaScript. This code contains show and hide functions that modify the style of the page element passed in as "el."
function show(el){
if(document.getElementById(el) == null){
return;
}
document.getElementById(el).style.display = "block";
}
function hide(el){
if(document.getElementById(el) == null){
return;
}
document.getElementById(el).style.display = "none";
}Add a unique id, and mouse event handlers that call the show and hide functions to each submenu. The id must match the parameter passed to the show and hide functions. Each submenu must have a unique id (for instance, submenu1, submenu2). The following shows the changes to a snippet of the code from earlier:
<ul class="submenu" id="submenu1" onmouseover="show('submenu1')" onmouseout="hide('submenu1')">
Add mouse event handlers that call the show and hide functions to each main menu item. Pass those functions the corresponding submenu id (for example, Menu 1 will call the show/hide functions for submenu1, Menu 2 for submenu2). The following shows the changes to a snippet of the code from earlier:
<ul class="menu" id="menu">
<li onmouseover="show('submenu1')" onmouseout="hide('submenu1')">
<a href="item1.html">Menu 1</a>Your drop-down menu is complete.
Wrap Up
-
Finish off your menus by expanding on the CSS. Add borders, background colors and padding, for example. Tweak the padding and margins to achieve a polished appearance. Remember to test your page in different browsers to make sure the menu displays and functions correctly no matter which browser your visitors use.
-
