One of the most popular website navigation elements used today is the horizontal drop-down menu bar. Using the code provided in this article, you'll be able to create a menu bar that meets your requirements. You'll be able to easily change the number of main menu and sub-menu items, and to style the menu as you desire.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022


Code for Horizontal Drop-down Menu Bar

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.



RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268