Think Solution Business, Mind and Healty

Sample in drupal

output :

sample script

<p>
<link href="http://localhost/iframetest/popupmenu.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://localhost/iframetest/jquery.min.js"></script> <script type="text/javascript" src="http://localhost/iframetest/popupmenu.js">

/***********************************************
* Flex Level Popup Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.3lucky.com/ for this script and 100s more
***********************************************/

</script></p>
<p style="text-align: left;"><a data-popupmenu="popmenu1" href="http://www.3lucky.com">Dynamic Drive</a></p>
<p style="text-align: left;"><a data-popupmenu="popmenu2" href="http://www.3lucky.com">Webmaster Resources</a></p>
<!--HTML for popup Menu 1-->
<ul class="jqpopupmenu" id="popmenu1">
<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>
<!--HTML for popup Menu 2-->
<ul class="jqpopupmenu" id="popmenu2">
<li><a href="http://www.3lucky.com/">Dynamic Drive</a></li>
<li><a href="http://easy-step-webdesign-solution.blogspot.com/">CSS Drive</a></li>
Reference</a></li>
</ul>

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.3lucky.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".

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.3lucky.com.com" shape="rect" coords="91, 88, 186, 156" data-popupmenu="popmenu1">
<area href="http://easy-step-webdesign-solution.blogspot.com/" shape="rect" coords="137, 42, 223, 68" data-popupmenu="popmenu2">
</map>
<img border="0" src="piechart.jpg" width="237" height="172" usemap="#piechart"></td>

thank's to to you