amazon.com javascript/dhtml menu feature

February 15, 2006 8:52 PM

I'd like to re-create the dhtml/javascript menu amazon.com uses in the top navigation button "See All 32 Product Categories". I've run out of google juice. There's an answer on experts-exchanges.com but I thought I'd post here before paying...
posted by masymas to computers & internet (8 comments total)

If you want to see experts-exchange.com solutions, just use Google's cached version of the page (link here to the question I believe you want answered). Hope that helps!
posted by educatedslacker at 9:01 PM on February 15, 2006

And in case it isn't working for you, here are the two links it gives as replies.
posted by educatedslacker at 9:04 PM on February 15, 2006

Or scroll down the page. Experts exchange puts the solutions at the bottom of the page.
posted by cogat at 9:07 PM on February 15, 2006

Well, that works for the first couple of solutions, but then they start the "if you want an answer, pay us some money" routine with big orange buttons everywhere asking you to sign up.
posted by educatedslacker at 9:12 PM on February 15, 2006

Hmm... clearing my cookies bought me another couple of "freebies". That seems to be the easiest way to keep the free answers coming.
posted by educatedslacker at 9:15 PM on February 15, 2006

This is basically two problems.

1) How to get the data to the page.
2) How to make it do the pretty little expandy thing

#1 can be simple or it can be difficult. The difficult (allthough more elegant) way would be to use an ajax call to retrieve the data from the backend when the user decides they want it. The easy way is to just always include the info in every page incase they need it. It's up to you, but your ajax solution will be more difficult and depend on the technology you're using on the backend. Start with the data staticly included and move to ajax if needbe.

#2 ... Funny .... yahoo just released a really excellent javascript library. I haven't used it yet, but it has some expandy functions. You'd basically create a div (probably use absolute positioning) with the content of the menu and use css to hide it. Then, use yahoo's expandy api call to make it spring into action.


Hope this helps...
posted by crunchyk9 at 9:39 PM on February 15, 2006

There are a number of ajax/dhtml libraries floating around out there that can do this sort of thing. If the yahoo one doesn't float your boat, scriptaculous is a good one. (And this thread contains links to several others.)
posted by ook at 10:12 PM on February 15, 2006

Is it the popout effect that you're looking for or just the showing/hiding? If it's just the show/hide, you don't need ajax or anyone's external library, just a little bit of dhtml. If you need the pop, then yeah, scriptaculous will hook ya up.

I did a presentation on DHTML + scriptaculous for my local AZPHP group last month. You can download How I Stopped Worrying and Learned to Love the DOM from my site, if you're interested... The slides are in OpenOffice format, but I've got a bunch of html example pages which demonstrate showing, hiding, and moving stuff around using HTML, Javascript, and CSS.
posted by ph00dz at 5:28 AM on February 16, 2006