New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE7+ Opera8+

Flex Level Popup Menu (v1.2)

Author: Dynamic Drive

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-popupmenu inside 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 AREA element) 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.

Dynamic Drive

Webmaster Resources

Image Map:

Directions Developer's View

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:

Select All

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:

Select All

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: