- 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="/links/?u=item1.html">Menu 1</a>
<ul>
<li><a href="/links/?u=item11.html">Item 11</a></li>
<li><a href="/links/?u=item12.html">Item 12</a></li>
<li><a href="/links/?u=item13.html">Item 13</a></li>
</ul>
</li>
<li>
<a href="/links/?u=item2.html">
Menu 2</a>
<ul>
<li><a href="/links/?u=item21.html">Item 21</a></li>
<li><a href="/links/?u=item22.html">Item 22</a></li>
<li><a href="/links/?u=item23.html">Item 23</a></li>
</ul>
</li>
</ul> - 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>
<li>
<a href="/links/?u=item1.html">Menu 1</a>
<ul >
... - 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>
<div>
...[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;
} - 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();"> - 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 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>
<li onmouseover="show('submenu1')" onmouseout="hide('submenu1')">
<a href="/links/?u=item1.html">Menu 1</a>
Your drop-down menu is complete. - 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.
- Advertisement -
- Advertisement -