Tooltip Menu
It's quite easy to create a navigation menu with Menucool Tooltip widget (see demo above).
Features
- Support both horizontal and vertical menus
- Allows any HTML content
- Open sub menu by onmouseover or onclick event
- Support getting sub menu content from a separate document via the Menucool Tooltip's built-in Ajax function (tooltip.ajax)
-
Supported by all major browsers
IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, and hand-held devices such as iPad, iPhone, android ...
How To Build
- Make each of your submenus to be a DIV element with an unique ID, and place all of them in an element that is styled as { display:none; }
-
Get the source code of the Tooltip, and link them in the head section of your page:
<link type="text/css" rel="stylesheet" href="/(path)/tooltip.css" /> <script type="text/javascript" src="/(path)/tooltip.js"></script>
-
Put the HTML of your top-level menu items on your page, and add a client event to each of the main menu items that has a submenu. For example:
<a href="#" onmouseover="tooltip.pop(this, '#sub1')">Maecenas</a>
Source Code
The source code is within the package (demo 3) that you can download from Menucool Tooltip.
License
The Tooltip Menu does not require Menucool Menu license. It requires Menucool JavaScript Tooltip license.