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/ 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.
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.
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
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/ 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
Although I have no doubt Starbucks can do it themselves, this looks similar to Twitter Bootstrap in functionality.
Is there a reason you can't inspect the site yourself and do that?
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.
Check out Bootstrap...that should give you a good start.
I'm only interested in their mega menu code; not their site template.
The menu functionality is part of Bootstrap.
Bootstrap menu don't work in IE8 at all.
And did you mention that before?
:-)
Good luck with your search.
thanks for no help.
You are more than welcome.
Glad you took the time to look over the suggestions I offered.
Look for ID of
#navand classes of.fulland.small.They are using JavaScript to add aforementioned classes to the
#nav.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.
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