Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Code for Horizontal Drop-down Menu Bar

By Stephen Bucaro

One of the most popular website navigation elements used today is the horizontal drop-down menu bar. This element is usually found just below a website's header. As you pass your mouse pointer over the main menu items, related sub-menus popup just below each main menu items. Such a menu is relatively easy to code and lends itself to a high degree of styling.

In this article I'll provide you with complete code for a horizontal drop-down menu bar. The menu bar is created using an html unordered list (<UL>) element which is displayed horizontally by assigning its list items (<li>) the style float:left. The submenus are html divs which are made to appear to drop down by changing their display style from none to block. The divs contain links that are specially styled.

For this example, we'll need to create some html code, some style code, and some Java Script code. We'll create the html code first by creating the main horizontal menu bar, as shown below.

<ul id="mainmenu">
<li onmouseover="displaySubMenu('submenu1')" onmouseout="hideSubMenu('submenu1')">Menu 1</li>
<li onmouseover="displaySubMenu('submenu2')" onmouseout="hideSubMenu('submenu2')">Menu 2</li>
<li onmouseover="displaySubMenu('submenu3')" onmouseout="hideSubMenu('submenu3')">Menu 3</li>
</ul>

Note that each list item, in it's mouseover event, calls a Java Script function named displaySubMenu and in it's onmouseout event, and calls a Java Script function named hideSubMenu, passing each function the id of the related sub-menu. In the above code you edit the text Menu 1, Menu 2, and Menu 3 to your menu names. Shown below is examples of code for three sub-menus.

<div id="submenu1" onmouseover="displaySubMenu('submenu1')" onmouseout="hideSubMenu('submenu1')">
<a class="submenulink" href="#">Menu Item 1</a><br />
<a class="submenulink" href="#">Menu Item 2 Menu Item 2</a><br />
<a class="submenulink" href="#">Menu Item 3</a>
</div>

<div id="submenu2" onmouseover="displaySubMenu('submenu2')" onmouseout="hideSubMenu('submenu2')">
<a class="submenulink" href="#">Menu Item 1</a><br />
<a class="submenulink" href="#">Menu Item 2</a>
</div>

<div id="submenu3" onmouseover="displaySubMenu('submenu3')" onmouseout="hideSubMenu('submenu3')">
<a class="submenulink" href="#">Menu Item 1</a><br />
<a class="submenulink" href="#">Menu Item 2</a><br />
<a class="submenulink" href="#">Menu Item 3</a><br />
<a class="submenulink" href="#">Menu Item 4</a>
</div>

Note that each div calls the same Java Script functions with the same events as the list items in the previous code, except this time passing each function their own id. In the above code you edit the text Menu Item 1, Menu Item 2, and so on to be your sub-menu names. In each sub-menu link you would replace the pound sign (#) with the URL related that link.

That's all there is the html code. Note that each sub-menu contains a different number of links. You can cut and paste to add or remove links as required. You can also add more main menu items by adding more list items and then adding the code for the related sub-menu div. The only thing you ned to keep in mind is to increment the sub-menu id's. For example the next sub-menu id would be submenu4.

One more html code related item remains in that you need to add a call to a function named hideSubMenus to the <body> tags onload event. As indicated by the name, this Java Script function hides all the submenus when the webpage is first loaded. The code for the <body> tag is shown below.

<body leftmargin="0" topmargin="0" onload="hideSubMenus()">

Now lets create our style code. Shown below is a style code block that is to be placed in the <head"> section of your webpage. This style code block contains the styles for the main menu unordered list.

<style type="text/css">
#mainmenu
{
list-style: none;
margin: 0;
padding 0;
left: 0px;
top: 0px;
width: 1024px;
height: 18px;
border-style: solid;
border-width: 2px;
border-color: blue;
background-color: a0a0ff;
}
</style>

The style rule list-style: none eliminates the bullets from the list items. Note how the position rules width and height set the dimensions of the main menu bar. The border and background rules set the appearance of the main menu bar. If I used the rules in short-cut form the number of rules could be reduced substantially, however this is a learning example and using individual rules makes it easy for you to understand and modify the code to create the style that you desire.