Pop Up Menus

Question: How do you create hover buttons to other hyperlinks when you hover the mouse over the main button on a web page? When I hover the cursor over the main button I want additional buttons to drop down so I can click on them and follow the hyperlink.

Answer: One way to do this is to use my extended tooltip script but you will need to make some modifications to the way it is called.

The main problem with trying to create a hover menu is that as soon as you move the mouse off of the original field in order to move it over the new entries you are no longer hovering over the original entry and so the hover menu will disappear. There are two ways to solve this.

The simplest solution is to require your visitor to click on the main entry instead of just hovering over it in order to get the new menu to appear. Clicking this link will make a tooltip menu appear (if it isn't already showing) or disappear (if it is). Once the menu is showing you can move the mouse over it and select any of the links in it as normal.

The code for this link is as follows:

< href="#" onclick="popUp(event,'t1');return false">this link</a>

Of course this isn't quite what you asked for. You want the menu to appear when your visitors hover over the link. We can do this if we go back to the original extended tooltip code using the mouseover/mouseout calls and modify the mouseout code to delay having the popup disappear (so that the menu will be there long enough to select a link). Try this link which will display the menu when you hover over the link and continue to display the menu for three seconds after you move off of the link. This gives three seconds in which to select from the hover menu before that menu disappears. The onmouseout code to do this is as follows:


You can change the time that the menu displays for by changing the 3000 to the number of milliseconds that you want.

In each of the above instances you can change the appearance of the menu that appears by using style parameters on the individual div commands for the popups. The above example uses style="font-size:15; width:100px; background-color:#e7f7ff; layer-background-color:#e7f7ff;" (Note that you also need to remove those settings from tooltip.css in order for the locally coded version to apply in all supported browsers). You can also create as many popus as you require as long as you give each a different id (the example uses id="t1", you can use whatever you like).


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow