Javascript - Hovermenu

Hovermenu is a javascript which provides menubuttons. These buttons typically show an icon. When you move the mouse over a button it will became larger and shows a text.

Have a look at the example on: http://gundermann.bplaced.com/playground/hovermenu/
The examle is implemented with ZURB Foundation.

Usage

Of cause you have to import the javascript into the html file. Also you have to add a div to the body with an specific id. Inside of a script tag you have to add any button with the function addMenu(imagepath, text, additionalClass, link). After this you have to call the menu by showMenu(menuIndex). In the end you have to activate the hover by enableHover(additionalWidth).

Meaning of the parameter

• imagepath: Path to the image that is shown on the button.
• text: The text shown when button has hover.
• additionalClass: An class-attribute of the html-element. You might use it to use different colors.
• link: The page which is referenced by the menu button.
• menuIndex: The number of the active menu for the current page. (First number is 0)
• additionalWidth: The difference in px between the width of the button without hover an with hover.

Download

Hovermenu