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 XHTML
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.
Here’s the (X)HTML for the image map. I’ve extracted the style information and the JavaScript, and will explain them each separately.
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.
The CSS
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:
So this gives us a box that would stand out and above other elements on the page, with a solid background and border, as well as a higher z-index. I say ‘would’ because we’ve also defined it to be invisible. The inline style defines the absolute positioning, but that really doesn’t matter, as it will be changed by the JavaScript. The following styles are optional, but recommended if the layer is menu style, as it serves to differentiate the item links, make it more apparent that it’s a menu of links rather than a simple box of text.
DHTML 
/ 36 
HTML5 Boilerplate Introduction
