Dropdown Menus implementation using javascript

HierMenus (Dropdown Menus) - a common element in many websites/ web applications. Whether you are adding items to cart or looking for some news or listening to music, HierMenus will provide you navigation to reach the page you wanted with much ease and efficiency. As HierMenus will not be displayed until you want (on mouse over of a particular content) the web page will look clean and uncluttered.

One common way of building the HierMenus is by using JavaScript. The common drawbacks/hindrances faced while using JavaScript for building HierMenus are cross browser compatibility, efficiency, reusability and expandability. All the issues are tackled by separating the content for menus, style and functionality for display into reusable components.

• A CSS file for look and feel of HierMenus.
• A Js file (Loader,js) for creating HierMenus on load of page and Displaying corresponding HierMenus on mouse over of tabs.
• Another JavaScript file containing the data for the Menus in the form of arrays. The arrays will have width of tab, color for the tab, background color of tab, images links for tabs, a field for checking whether the corresponding link is having submenus are not like that, menu name for the link and Href value for the links.

On load of web page a function in the Loader.js file will be called and will construct all the HierMenus based on the no. of 1st level tabs (1st level tabs will be created in JSP/HTML page). On mouse over of particular tab, POPUP(‘tabMenuName’) function in the Loader.js file will be called and will display the corresponding 2nd level menus and on the mouse out of tab POPDOWN(‘tabMenuName’) function in the Loader.js file will be called and will make display none for that particular tab. POPUP(‘tabMenuName’) will also make sure that the Heir menus displayed will be visible to user(Horizontal and Vertical alignment of menus) for all window sizes.

Advantages by using this approach:

• Fast and efficient.
• Content, style and functionality are separated and made independent.
• Font color or style and background color can be changed with simple changes in the CSS file with out affecting the functionality.
• The number of menu tabs can be increased without affecting the functionality or look and feel.
• Dynamic display according to the window size and menu size.
• Cross Browser compatibility.
• Heir menus built using this are supported in IE6, IE7, Firefox2 and opera.