This article provides you with easier expanding menu code than a previous article did by losing automatic menu unexpand feature and added some easy CSS code to provide nice mouse over effects.
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

Easier Expanding Menu Code

In a previous article, I described a method to create an expanding menu similar to Windows Explorer, but with only one level of sub-menus. One nice feature of that expanding menu was that when you expanded a menu, the previously expanded menu would unexpand. This helps limit the total length of the menu, but it requires the use of a Java Script array. Every time you expand a menu, the code searches the array for any expanded menus and un-expands them.

Easier expanding menu

Maybe you don't care, or don't desire previously the expanded menu to un-expand. Or maybe you want some easier code and whether the previously the expanded menu to un-expands is a lower priority. In any case, this article provides you easier expanding menu code by losing automatic menu unexpand feature (you need to click to unexpand a menu) and adds some easy CSS code to provide nice mouse over effects.

This example requires three blocks of code, html to create the menu, CSS to expand and unexpand menus and add mouse over effects, and Java Script attached to the html elements onClick events to modify their CSS properties. I promise you that all this code is extremely simple. First let's start with the html. Shown below is code to paste into your webpage to create a menu.

<a class="menu" href="#" onClick="return toggleMenu('1')">
<img id="i1" border=0 src="closed.gif"> Menu 1</a><br />

<span class="submenu" id="m1">
<a class="menulink" href="#">SubMenu1</a><br />
<a class="menulink" href="#">SubMenu2</a><br />
<a class="menulink" href="#">SubMenu3</a>
</span>

This code creates a top level menu. Replace the text "Menu 1" with the title of your menu. This menu contains three sub menu items. In each sub menu line replace the # character with the link for your menu item. You can delete sub-menu lines if you don't need three sub-menu items in your menu. You can add as many sub menu items as you need by simply adding more lines. Note that there is a line break <br /> tag at the end of every sub-menu item line, except the last one.

You can create as many of these top level menus as you need by simply pasting another code block below the ones you already have, but you need to make some minor edits to each new menu, as indicated below.

-  Increment the number passed by the toggleMenu function in the first line.
- Increment the id of the image in the second line, ie from "i1" to "i2".
- Increment the id of the "submenu" span, i.e. from "m1" to "m2".

For example, shown below is the code for the second top level menu.

<a class="menu" href="#" onClick="return toggleMenu('2')">
<img id="i2" border=0 src="closed.gif"> Menu 1</a><br />

<span class="submenu" id="m2">
<a class="menulink" href="#">SubMenu1</a><br />
<a class="menulink" href="#">SubMenu2</a><br />
<a class="menulink" href="#">SubMenu3</a>
</span>

You can add as many top level menus as you want, as long as you increment those three items in the code for each one you add. In each top level menu, you can add or delete as many sub menu items as you need.



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