|
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.
| 
Free Downloads
RSS Feed