Bookmark to del.icio.us
FF1+ IE7+ Opera8+
Flex Level Popup Menu (v1.2)
Note: Updated July 1st 11 to v1.2: Menu updated to work properly in popular mobile devices such as iPad/iPhone and Android tablets.
Description: Enhance arbitrary links on your page with some multi level powers with Flex Level Popup Menu! It lets you associate a multi level drop down menu to any link on the page, so moving the mouse over the link activates the menu to be shown beside it. Each pop up menu is simply defined as a regular nested UL on the page, making it very intuitive to set up, not to mention the menus search engine friendly! Lets run down the script's features:
When it comes to menus, popping up is a good thing!
See also: Flex Level Drop Down Menu.
Step 1: This script uses three external files, including an image. Download them below (right click, and select "Save As"):
Step 2: Insert the following code into the <head> section of your page:
Step 3: Add the below menu code to the BODY section of your page, which contains two arbitrary anchor links and their corresponding popup menus:
Well, that's it for installation. Read on for more details on setting Popup menu
Set Up Information
Defining and adding a popup menu to a link is simple enough. Firstly, define
the popup menus, which should each just be a regular
Notice how the UL menu carries a unique ID and CSS class of "
With the popup menu defined, to associate it with a link on the page, just
insert the attribute "
<a href="http://www.dynamicdrive.com" data-popupmenu="popmenu1">Dynamic Drive</a>
And that's it. Moving the mouse over the link "Dynamic Drive" above will now
activate the popup menu with ID "
There are also a few variables inside popupmenu.js that you may wish to edit, which affect things such as the arrow image's full path, animation speed, plus delay before menu appears/ disappears onMouseover:
arrowpath: 'arrow.gif', //full URL or path to arrow image
You can also associate a pop up menu with hotspots within an image map, so moving the mouse over these hot spots display a pop up menu. Simply define your Image Map as usual, then insert the attribute "data-popupmenu" into the desired AREA elements just as you would inside a regular link. For example:
Table Of Contents
This script consists of an index page plus two supplementary pages: