1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Any tutorial for drop down menu ?

Discussion in 'CSS' started by avin7000, Aug 21, 2013.

  1. #1
    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 ?
    avin7000, Aug 21, 2013 IP
  2. Apokalupsis

    Apokalupsis Greenhorn

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #2
    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. ;)
    Apokalupsis, Aug 23, 2013 IP
  3. dwirch

    dwirch Active Member

    Messages:
    208
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    75
    #3
    dwirch, Aug 26, 2013 IP
  4. Apokalupsis

    Apokalupsis Greenhorn

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    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?
    Last edited: Aug 26, 2013
    Apokalupsis, Aug 26, 2013 IP
  5. dwirch

    dwirch Active Member

    Messages:
    208
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    75
    #5
    dwirch, Aug 26, 2013 IP
  6. dwirch

    dwirch Active Member

    Messages:
    208
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    75
    #6
    dwirch, Aug 26, 2013 IP
  7. Apokalupsis

    Apokalupsis Greenhorn

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #7
    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)...
    Apokalupsis, Aug 26, 2013 IP
  8. avin7000

    avin7000 Greenhorn

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #8
    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.

    Attached Files:

    avin7000, Aug 27, 2013 IP
  9. avin7000

    avin7000 Greenhorn

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #9
    With some more improvement :

    http://jsbin.com/oVope/1
    http://jsbin.com/oVope/1/edit?html,css,output
    avin7000, Aug 28, 2013 IP
  10. ram4nd

    ram4nd Active Member

    Messages:
    167
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    50
    #10
    Don't use CSS3 as it isn't supported by many browsers. Use some kind of existing javascript library.
    ram4nd, Aug 29, 2013 IP
  11. avin7000

    avin7000 Greenhorn

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #11
    I don't care about IE. As long as these thing support Firefox & Chrome, I am fine :)
    avin7000, Aug 29, 2013 IP
  12. My Property Stores

    My Property Stores Active Member

    Messages:
    265
    Likes Received:
    2
    Best Answers:
    3
    Trophy Points:
    58
    #12
    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.
    My Property Stores, Sep 24, 2013 IP