SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Jed.
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Amazon like menu

    Hello,

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

    Please see attachment
    Attached Images Attached Images

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,273
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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).

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,273
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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. ????


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •