CODEWITHSUNDEEP
javascripthtmlcss
Rolando
Rolando

Reputation: 62596

How to make a dropdown menu like the one on amazon.com?

How to make a dropdown/slideout menu like amazon.com such that when you mouseover "Shop By Department", then mouseover all the options, another menu slides out to the right displaying content based on what you moused over? (If possible, with CSS3 only without javascript)?

Also assuming you had multiple departments like amazons, is it practical to have multiple divs like:

<div id="department1" style="display:none">
Content for department1
</div>
<div id="department2" style="display:none">
Content for department2
</div>
...

TO get that slideout part after you get the dropdown, I call the div id "currentdepartment" to change content that changes upon onmouseover on any "name of department", I would typically do: $("#currentdepartment").html($("#department1").html())

is there some better way to do this for ideal performance? (based on speed and space [it seems that having multiple divs for each department's content on mouseover on the same page seems potentially wasteful])

Upvotes: 1

Views: 6385

Answers (2)

user1737842
user1737842

Reputation:

Amazon has built its own Jquery for this. Ofcourse they have used other libraries like Jquery and Sizzle but they cannot use a script directly nor can we intend to use this particular script directly.

So your answer would be that Amazon basically uses CSS sprites, Jquery, and Sizzle to develop their own Custom script for their code. I checked the code and it involves over 5500 lines which i do not think is feasible for you unless you are building Amazon part 2.

So i would suggest looking for dropdown menu's which are easier to build and a starting place for this would be Dynamic Drive

They have easy to use menu's and tutorial's to guide you to use them. Hope that answered your question

Upvotes: 1

Hamed Saadat
Hamed Saadat

Reputation: 429

Someone wrote a blog post about the amazon drop down box a while ago:

http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

Upvotes: 1

Related Questions