Grow your CSS skills. Land your dream job.

How http://www.starbucks.ca/ mega menu works

  • # March 13, 2013 at 8:54 am

    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

    # March 13, 2013 at 9:00 am

    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?

    # March 13, 2013 at 9:06 am

    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.

    # March 13, 2013 at 9:07 am

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

    # March 13, 2013 at 9:10 am

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

    # March 13, 2013 at 9:12 am

    The menu functionality is part of Bootstrap.

    # March 13, 2013 at 9:31 am

    Bootstrap menu don’t work in IE8 at all.

    # March 13, 2013 at 9:42 am

    And did you mention that before?

    :-)

    Good luck with your search.

    # March 13, 2013 at 9:51 am

    thanks for no help.

    # March 13, 2013 at 9:58 am

    You are more than welcome.

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

    # March 13, 2013 at 11:50 am

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

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

    # March 13, 2013 at 12:00 pm

    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.

    # March 13, 2013 at 1:24 pm

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".