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

NS6+ IE5+ Opera 7+

Pop-it menu

Author: Dynamic Drive

Note: Last updated April 14th, 05' for various improvements.

Description: Pop-it allows you to associate a dynamic menu with regular links on your page. As the mouse moves over the link in question, a menu pops up containing "sub links". Think of it as a "loose" drop down menu.

This is a great script for expanding links on your page with a 2nd level. The menu intelligently re-positions itself depending on how close it is to the edge of the browser window, so it's always in full view.

This script works in IE4+, NS4, and NS6+/Opera7+. You can specify a valid default URL for each link for other browsers to navigate to.

Demo:

Webmaster Links
News sites


Directions Developer's View

Step 1: Insert the following script into the <head> section of your page:

Select All

Step 2: Add the below to the <body> of your page. It contains the HTML codes for the menu:

Select All

Configuring the menu

Customizing the menu is an easy process:

1) Edit array "linkset[]" inside code of Step1 to specify the menu sets and their links.
2) Then, change the <A> tags of code of Step 2 so the desired menu (ie: linkset[0]) is associated with the link.

You can also modify the pop-it menu's visual look by changing the Style Sheet of Step 1. To modify the menu's width, first set the variable "defaultMenuWidth" in the code of Step 1. Then for a specific menu that you wish to have a different width, pass in an optional 3rd parameter (ie: "180px") inside function showmenu(), as shown in the code of Step 2.

Have fun!