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
Gabriel Ward
20,222 Pointsmenu icon on homepage
I follow the info presented about creating the menu and all the buttons/links on it. But what I'm trying to work out is how the menu icon (the three horizontal bars) at the top of the homepage in the right hand corner, is created. Where is it in the code? I've had a look through the html files and can't see anything about a button.
Any help/guidance on this would be greatly appreciated.
Gabriel Ward
20,222 PointsOk great, thanks Agustin. I see that the button has the class 'nav-toggle', would you be able to enlighten me a bit more as to how it appears on the page? I know it's to do with the before and after pseudo classes, but I'm a little unsure how the whole thing works. I've seen this before in the CSS Foundations course I took. But this seems a bit more complicated. Any help with this would be greatly appreciated.
Thanks, Gabe
3 Answers
Agustin Grube
39,278 PointsCSS creates that button. JavaScript controls the integration. You will find the code in the project files in Styles.css.
Agustin Grube
39,278 PointsThe appearance is the JavaScript part. Once you hit the button, the Javascript activates. What do you what it to do?
Also, leaving the "Hamburger" icon on the right side is best. Most people are right handed and use the mouse with the right hand or have the right hand available using a mobile device. It's better for the hand to go up the page to the right corner and not across the device. On the desktop, it's also easier to up the page on the right side and not across the page.
Gabriel Ward
20,222 PointsOk, I'm just slightly confused about where the hamburger icon comes from. I can't see any img url or anything. Though I was reading about how you can create shapes entirely with :before and :after pseudo classes, without any kind of img file. Is this correct?
Agustin Grube
39,278 PointsYou can search foundation.css file for .menu-icon to learn more.
Yes, CSS can do amazing things. It's come a long way and it well be doing more soon.
Also, as soon as you can (as in now), take the course call "Website Optimization" in Development Tools. It's a misnomer because it's really about Chrome Dev Tools. If you want to see how something works or what CSS was used or were the code is in the file structure, this is the tool to use. Here is the description of the course:
"The Google Chrome web browser includes a built in set of features for web designers and developers called the Chrome DevTools. Using the DevTools, any webpage can be inspected for bugs and profiled on a number of performance characteristics. Some of the most powerful panels in the DevTools include the Elements panel which allows for interaction with DOM tree and styling, as well as the Console panel, which makes it trivial to access JavaScript functions and test out new front-end code."
I use it all the time. Also, my site is not in Foundation, so it's an image file. More that one way to do things.
Agustin Grube
39,278 PointsAgustin Grube
39,278 PointsCSS creates that button. JavaScript controls the integration. You will find the code in the project files in Styles.css.