There are many situations where user experience can be improved on a website by using dynamic menus. These can be created and used in a variety of ways, but I’m going to use a layer or <div> containing information or links on an web page that can be displayed or hidden dynamically. A few examples of this type of script are (1) the advertisements that appear when you move your mouse over certain keywords on the Developer Shed websites, (2) fly-out menus in a website’s navigation area, providing links to sub-sections of the site, or (3) a calendar that displays itself, allowing you to select a date to be entered in a form field. These are the most common applications of the technique, but there are many more.

It’s rarely practical to hard-code the position of such a menu, as the landscape of the page may fluctuate constantly based on the browser resolution, or even the amount of content on the page, in the case of a dynamic, data-fed web site. It is also far too tedious to maintain a separate style sheet with all positioning information based on an array of monitor resolutions. It would be very handy to have the ability to determine the location of where the menu should be, and tell it to display itself there.

That is the purpose of this article. Through the use of DHTML (XHTML, CSS, & JavaScript), we will create a visually appealing menu that will appear slightly offset to the mouse location. The methods I describe will be easily extensible for any use, or any number of menus.