- This topic is empty.
-
AuthorPosts
-
March 13, 2013 at 8:54 am #43354joegreenMember
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 #128030Paulie_DMemberAlthough 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 #128031joegreenMemberI’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 #128032Paulie_DMemberCheck out Bootstrap…that should give you a good start.
March 13, 2013 at 9:10 am #128034joegreenMemberI’m only interested in their mega menu code; not their site template.
March 13, 2013 at 9:12 am #128035Paulie_DMemberThe menu functionality is part of Bootstrap.
March 13, 2013 at 9:31 am #128042joegreenMemberBootstrap menu don’t work in IE8 at all.
March 13, 2013 at 9:42 am #128043Paulie_DMemberAnd did you mention that before?
:-)
Good luck with your search.
March 13, 2013 at 9:51 am #128044joegreenMemberthanks for no help.
March 13, 2013 at 9:58 am #128045Paulie_DMemberYou are more than welcome.
Glad you took the time to look over the suggestions I offered.
March 13, 2013 at 11:50 am #128063AlenParticipantLook 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 #128065notfilcMemberIt 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 #128075EricMemberOpen 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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.