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:
-
Lets you extend any link on the page with a multi level pop
up menu, by inserting the custom attribute
data-popupmenuinside the link. - Each pop up menu is simply defined as a regular, hidden nested UL on the page. Also supports dynamic definition using JavaScript. v1.1 feature
-
Works with image maps (each
AREAelement) apart from regular links. - Sub Menus repositions themselves when too close to the right or bottom edges of the browser window so they remain in view.
- Ability to customize the expand animation speed.
- Ability to specify the delay before each menu and its sub menus appear/ disappear when the mouse rolls over and out of them.
When it comes to menus, popping up is a good thing!
See also: Flex Level Drop Down Menu.
Image Map: |
Directions
Step 1: This script uses three external files, including an image. Download them below (right click, and select "Save As"):
- popupmenu.js
- popupmenu.css
-
Single image:
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 UL list,
nested if you desire multiple levels. For example:
<ul
id="popmenu1" class="jqpopupmenu">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
<ul>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li><a href="#">Sub Item 3.4a</a></li>
</ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
<ul>
<li><a href="#">Sub Item 5.1a</a></li>
<li><a href="#">Item Folder 5.2a</a>
<ul>
<li><a href="#">Sub Item 5.2.1a</a></li>
<li><a href="#">Sub Item 5.2.2a</a></li>
<li><a href="#">Sub Item 5.2.3a</a></li>
<li><a href="#">Sub Item 5.2.4a</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 6a</a></li>
</ul>
Notice how the UL menu carries a unique ID and CSS class of "jqpopupmenu".
This is required. The ID attribute can be arbitrary but unique in value.
With the popup menu defined, to associate it with a link on the page, just
insert the attribute "data-popupmenu" inside it pointing to the
ID of the desired popup menu:
<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 "popmenu1".
Instead of defining your flex menus as ULs literally on the page, you can also do this dynamically using JavaScript, such as inside an external .js file. See "Dynamically defining your flex menu contents" for more info.
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
popupmenuoffsets: [0, 0], //additional x and y offset from mouse cursor for
popup menus
animspeed: 200, //reveal animation speed (in milliseconds)
showhidedelay: [150, 150], //delay before menu appears and disappears when mouse
rolls over it, in milliseconds
Adding Flex Level Pop Up Menu to Image Maps
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:
<map name="piechart">
<area href="http://www.javascriptkit.com" shape="rect" coords="91, 88, 186, 156"
data-popupmenu="popmenu1">
<area href="http://www.cssdrive.com" shape="rect" coords="137, 42, 223, 68"
data-popupmenu="popmenu2">
<area href="http://www.codingforums.com" shape="rect" coords="36, 22, 103, 81"
data-popupmenu="popmenu3">
</map>
<img border="0" src="piechart.jpg" width="237" height="172" usemap="#piechart"></td>
Table Of Contents
This script consists of an index page plus two supplementary pages: