Any tutorial for drop down menu ?

I want to create a dropdown menu exactly as shown here : http://www.starbucks.com/

You hover on any menu item, a nice background appears with menu content. how do I accomplish this ?

PS : Is this called as drop down menu or something different name ?

 

I believe it is using JQuery, but not sure. Yes, it's a dropdown menu...but there are plenty of types of dropdown menus. While I don't know of any tuts that teach this, there is a cheap plugin for it: http://codecanyon.net/item/mega-menu-reloaded/1593152

I'd be interested in learning how to do that as well. I'm a nub with JS...but I am starting a JS course here in a couple days, then planning on following it up with JQuery course. I have no idea if afterwards I'd be able to create that type of menu with the courses...but I'm hoping.

 

You can do it with JS, but why not skip that bullsh*t and user pure HTML5 and CSS3 ? If you use your favorite search engine to look for CSS Mega Dropdown there are bunches of them out there.

Here's and exceptional one: http://net.tutsplus.com/tutorials/h...o-build-a-kick-butt-css3-mega-drop-down-menu/

 

Good find. However, while it is a mega menu (like Starbucks'), it doesn't have the animation nor use the page width. I would imagine that the latter could be resolved simply by editing the "width" attribute. But the fluid animation in the menu opening up (like at Starbucks), can that be done in css?

 

I'm sure it can, with CSS3/HTML5. Check the slide code from this page:

http://blogs.sitepointstatic.com/examples/tech/css3-sliding-menu/index.html

Should be easy enough to lift the slide part of the code, change it to vertical, then apply to your drop down.

 

Here is another one that uses CSS3 effects to be damn near what you are looking for. Mod the width of the drop down, make it drop instead of rise, and bingo bango.

http://codecanyon.net/item/menu-wit...ification-bubbles/full_screen_preview/1147974

....54 seconds with Google....

 

Or 3 secs asking in a thread discussing relevant solutions as it pertains to options the op can use and undoubtedly, will be seen by others (thus answering the question for them as well)...

 

posting in forums helps everyone.

anyways, I am trying to achieve something similar. I am using Bootstrap. This is so far I have worked (nope, its nowhere near to starbucks thingy).

Note that there are two versions, one uses panel & another table. And both are responsive.

 

With some more improvement :

http://jsbin.com/oVope/1
http://jsbin.com/oVope/1/edit?html,css,output

 

Don't use CSS3 as it isn't supported by many browsers. Use some kind of existing javascript library.

 

I don't care about IE. As long as these thing support Firefox & Chrome, I am fine

 

This drop down menu is created by using Jquery that's why its look like this, if you want same query then search drop down menus in html5 and jquery/CSS in google.