Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Unsubscribed User
4,479 PointsHow do you make the hidden 'burger' menus on mobile sites?
How do you make the expanding and collapsable 'burger' menus on mobile sites? (Like the one on the Treehouse mobile site)
Can they be done solely with CSS or do they need JavaScript?
I am currently working through the Web Design track - is this covered here or another course on Treehouse?
5 Answers
Jacob Mishkin
23,117 Pointsone way you can do it is by at the desired breakpoint is use display: none; on the burger class. then then have the nav display inline-block.
john larson
16,594 PointsJacob, that sounds nice and clean. But unless I missed it in what you said, that wouldn't produce the "slide in" effect would it? I mean, the menu would just show up at smaller sizes? Which is cool and desirable but only half the effect. I think.
Unsubscribed User
4,479 PointsHow do you then reveal the menu inside the burger class for smaller sizes of display?
Is it an 'onclick' type event using jQuery of Javascript?
Jacob Mishkin
23,117 PointsWhat slide in effect are you talking about? There is no slide on the the Treehouse nav. It's just a burger float right. Go into the dev tools and highlight the hamburger menu and see what happens at 960px. inseaed of display none, they use visibility: hidden and opacity: 0.
john larson
16,594 PointsSorry Jacob, I didn't even know what a burger menu was. I looked it up and the example I saw had it slide in from the left. Didn't mean to step on your toes there.
Jacob Mishkin
23,117 Pointsjohn larson no worries, we are are here learning, don't ever feel like your stepping on toes or anything here, it's totally cool.
Jacob Mishkin
23,117 PointsRory Baxter to reveal the burger you need to set the base style to display block or display inline-block, whatever you want then at the break point you want the full menu do display: none, or you can do what treehouse did as in my earlier post.
EDIT now thats just for the burger to appear and disappear, you will need to use JS for the menu at mobile.
Unsubscribed User
4,479 PointsThanks John.
I suddenly realised that not all web sites have menus that will flex down into 3 or 4 items, and that I'd totally taken for granted what has become the norm which is the neat little hidden menu that opens out onto a mobile screen.
You've confirmed for me that there'll be a little research and learning involved. Cheers.
Rory
Unsubscribed User
4,479 Points"EDIT now thats just for the burger to appear and disappear, you will need to use JS for the menu at mobile."
Thanks Jacob. You've helped me understand it even more -
Although I might be able to reveal and hide a menu with a hover on desktop, to reveal it on mobile I'd need a click event provided by JS.
Jacob Mishkin
23,117 PointsIf you look at the mechanics of the nav, you don't reveal the menu with any state, other than the width of the viewport. the width is what dictates whether it's mobile or desktop.
what do you mean by this:
"Although I might be able to reveal and hide a menu with a hover on desktop, to reveal it on mobile I'd need a click event provided by JS."
I'm not really sure what you mean, are you talking about the icon, or the menu itself? Why do you want to hide the menu on desktop? is there something in the header that takes precedence, so having a hidden menu would work in the design?
and if you use the hover state, make sure you also use the focus state along with it. Hover is kinda on the way out because of mobile design. Most people view the internet on their phones, and since there is on mouse to hover over things, the hover state is kinda useless. Be sure to pair it with focus, that way you can give mobile users some UI.
Here is a great article on mobile nav creation from smashing magazine. I highly recommend taking a look at this site:
this is for off canvas navs, but the process is very important to know, ie. the steps they take to implement the nav.
Unsubscribed User
4,479 PointsFrom what I can tell from using a mobile device, menus on a mobile version of a website are revealed by tapping the 'hamburger' menu icon on the screen.
Are you saying this is possible by HTML or CSS alone?
Jacob Mishkin
23,117 PointsNo, I am not. I said:
EDIT now thats just for the burger to appear and disappear, you will need to use JS for the menu at mobile.
In what part of my answer are you referring too? If I confused you in some way, please let me know.
Unsubscribed User
4,479 PointsJacob, you answered my question when you said "you will need to use JS for the menu at mobile."
Thanks.
Jacob Mishkin
23,117 Pointsnot a problem!
john larson
16,594 Pointsjohn larson
16,594 PointsI think what your talking about CAN be done with just css. BUT I think there are probably better ways to do it. This might be what you re looking for. However there's probably stuff in there you haven't come across yet. I'm betting you'll be learning some plug ins or something to do it easier that this example.
http://www.ymc.ch/en/how-to-make-a-hamburger-a-menu-for-mobile-websites