Amazon like menu

Hello,

How can I make a menu like Amazon’s. Is it JS?

Please see attachment

It’s a flyout menu, with some nice CSS to make it look pretty.

Here are several variations on the theme. The last one is the fanciest.

http://www.cssplay.co.uk/menus/latest-flyout-breadcrumb.html
http://www.cssplay.co.uk/menus/latest-flyout.html
http://www.cssplay.co.uk/menus/multi-line-flyout.html
http://www.cssplay.co.uk/menus/pro-flyout-list.html

If the CSS is too difficult to read there (what’s going on) then Sons of Suckerfish has a kinda more readable version.

They prolly changed it but I remember someone saying they liked the expansion menu at Amazon and I was like, what expansion menu?

Earlier, they had a JS expansion menu, where if you were like me and had no scripts, the menu was just completely open and looked like a regular list of links. With JS on, you only saw the main headers (books, music, etc).

Keep in mind that Amazon is very user-friendly-aware. If there is Javascript in that current fly-out menu, it is NOT necessary to work that menu. They are very conscious of the scriptless and want you to be able to shop and buy things without Javascript on. So, the JS may be some sugar on top of a working (and further degradable) CSS menu.

Yep, Stomme is correct, most pure CSS menu’s make use of what is commonly referred to as the “suckerfish” technique. This essentially works through an unordered list with menu items, sub-menus (et al) that are connected through the use of anchor hovers. So the li a li is set to display: none until the li a:hover li is invoked (the reason for this is due to IE6 not supporting li:hover li as it’s silly enough to only consider hovers working on anchor elements). Amazon of course back that up with some JavaScript to make it a bit more usable (such as a delay before the menu closes when you roll away). :slight_smile:

No, no display: none. Remember how screen readers deal with that.

It’s the pull-offscreen in -bazillion units method.

What I have discovered is that if you want any keyboard functionality (if you’re bringing the individual sub-list items back onscreen with :focus), your left or left-margin has to be in px. I don’t know why, but it never worked for me with “em” units. ???