- 1). Download and save the HMenu.js and the HMenu.css pages (see Resources) to your web server space. These files should be located in the same folder and in the same location as your web pages. The HMenu.js script contains all the necessary JavaScript functions required by any created cascading menu. The HMenu.css file is a cascading style sheet containing all the style elements needed for cascading menus.
- 2). Open any of your web pages in either an HTML editing program or Notepad. Within the header of this file, place the following code to include the needed script and css files:
<script language="JavaScript" src="HMenu.js"></script>
<link rel="stylesheet" href="/links/?u=HMenu.css">
This code should be placed after the <head> tag and before the </head> tag. - 3). Create the main menu container, main menu items, and sub-menu items with the following HTML code in the opened web page:
<div>
<div>
<div><a href="/links/?u=submenu1.htm">Sub menu 1</a></div>
<div>
<div><a href="/links/?u=submenu1item1.htm">Sub menu1 - Item 1</a></div>
<div><a href="/links/?u=submenu1item2.htm">Sub menu1 - Item 2</a></div>
<div><a href="/links/?u=submenu1item3.htm">Sub menu1 - Item 3</a></div>
</div>
<div><a href="/links/?u=submenu2.htm">Sub menu 2</a></div>
<div>
<div><a href="/links/?u=submenu2item1.htm">Sub menu2 - Item 1</a></div>
<div><a href="/links/?u=submenu2item2.htm">Sub menu2 - Item 2</a></div>
<div><a href="/links/?u=submenu2item3.htm">Sub menu3 - Item 3</a></div>
</div>
</div>
</div>
Ensure this code is placed within the <body> and </body> tags; preferably where you would place your standard menu bar.
The main div--"menuContainer"--encompasses the entire menu section. The "menu1" div shows there is one menu within this container. Each sub-menu is given a div id identity that corresponds with the main "menu1" div and proceeds numerically. In turn, each menu item listed within the sub-menus are named and numbered in the same fashion. - 4). Modify the preceding code to work with your web page links and titles. Keep in mind that each new menu div, subMenu div and menuItem div will need to be appropriately numbered. For example, the next subMenu div within this would be "subMenu1_3" and subsequent menu items would begin with "menuItem_3_1" and go forward.
Source...