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.
Dynamically Positioned Layers by Mouse Position - The XHTML (Page 2 of 3 )
The example Iíll use is that of a clothing store. This store offers three products: hats, shirts, and socks. The user will be able to click on an image map (or a menu bar if you want), and be taken to information for that product.
The socks however, come in a variety of color options. We could simply direct a user to another page from which they navigate to the page for the color they want. But our experience as web designers and usability Ďexpertsí dictates that we need to eliminate all unnecessary clicks, making the navigation path as short as possible. We can eliminate that click by showing them a quick menu, and take them directly to the specific page.
Nothing earth shattering here. Thereís a basic image map, which is presumably a person wearing the available hat, shirt, and socks (and hopefully more). When you click on the hat or shirt area, youíre taken to those pages. However, when you move your mouse over the socks, thatís when the magic happens. The moveObject function is called, with ĎsockOptionsí and Ďeventí as the parameters. Iíll explain these later. I also made sure for usabilityís sake that when you move your mouse over any other area, the sock menus returns to its invisible state.
Itís important to note that if you were to click on the socks, youíd still be directed to a generic - or parent Ė socks page. This is to ensure that even those visitors who donít have standards compliant browsers are still able to eventually navigate to the socks they want, they just have to suffer through that one extra click.
Now Iíll quickly explain the styling of the invisible menus.
It would be beneficial to specify a class for these menus, rather than a definition for the specific menu. This is because thereís a very good chance that youíll re-use these menus quite extensively. So hereís the basic style definition: