Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How http://www.starbucks.ca/ mega menu works

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #43354
    joegreen
    Member

    Hi there,

    I’m new to designing responsive web design. I’m thinking about designing the my first responsive web site with mega menu. I came across [http://www.starbucks.ca/](http://www.starbucks.ca/http://www.starbucks.ca/”) website which has a responsive mega menu. I’ve been looking at the code and I cannot figure out how the menu changes to an icon when the browser’s window size becomes small. Is it done using css and/or javascript. Can someone take a look at their website and give me a clue as how they did it.

    I’ve been looking for a responsive mega menu and there are few out there but they don’t work in IE7+ even though they say it does.

    Thanks a bunch

    Joe Green

    #128030
    Paulie_D
    Member

    Although I have no doubt Starbucks can do it themselves, this looks similar to Twitter Bootstrap in functionality.

    >Can someone take a look at their website and give me a clue as how they did it.

    Is there a reason you can’t inspect the site yourself and do that?

    #128031
    joegreen
    Member

    I’ve been going through their code for over a week stripping CSS except that used for menu. They are using media queries, Meganizr and jquery. Since I’m new, so far I haven’t been able to identify how it’s done. Not sure how css and javascript ties together. That’s why I’m looking for some help from someone who is more knowledgeable in responsive web design to give me a clue. That’s all.

    #128032
    Paulie_D
    Member

    Check out Bootstrap…that should give you a good start.

    #128034
    joegreen
    Member

    I’m only interested in their mega menu code; not their site template.

    #128035
    Paulie_D
    Member

    The menu functionality is part of Bootstrap.

    #128042
    joegreen
    Member

    Bootstrap menu don’t work in IE8 at all.

    #128043
    Paulie_D
    Member

    And did you mention that before?

    :-)

    Good luck with your search.

    #128044
    joegreen
    Member

    thanks for no help.

    #128045
    Paulie_D
    Member

    You are more than welcome.

    Glad you took the time to look over the suggestions I offered.

    #128063
    Alen
    Participant

    Look for ID of `#nav` and classes of `.full` and `.small`.

    They are using JavaScript to add aforementioned classes to the `#nav`.

    #128065
    notfilc
    Member

    It really doesn’t look that complicated. Go learn some more CSS and jQuery (hover states, positioning etc) and then have another look at it.

    #128075
    Eric
    Member

    Open up firebug bud. Inspect the icon. Make the window smaller. And then in sure you will see a class inserted or removed in the tag. Anything happening dynamically like that is JS

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.