Home arrow DHTML arrow Dynamically Positioned Layers by Mouse Position

Dynamically Positioned Layers by Mouse Position

One method of providing additional options to users is to present a menu that displays itself when necessary, such as when users click or just hover over an item. This article explains how to produce such a DHTML menu, which dynamically positions itself where the userís mouse is.

Author Info:
By: Justin Cook
Rating: 4 stars4 stars4 stars4 stars4 stars / 44
June 14, 2005
  1. · Dynamically Positioned Layers by Mouse Position
  2. · The XHTML
  3. · The JavaScript

print this article

Dynamically Positioned Layers by Mouse Position
(Page 1 of 3 )

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.

blog comments powered by Disqus

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials