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
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 PointsNavigation panel
Out of curosity I wanted to know how the menu/navigation panel on the treehouse home page was created. Anyone willing to share some code would be deeply appreciated aswell Nick Pettit
3 Answers
danielcroft
7,438 PointsI can link you to a couple of similar ones which may help you
http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/ http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/
These are really nice and you can download the source code so in theory you could just use them and edit it to suit your website. I love Codrops stuff :)
Giovanni CELESTE
20,961 PointsHi, don't know if I get what you ask, but if you want to create the same panel using HTML/CSS, you could look at the new project "Framework Basics" which cover CSS Framworks like Bootstrap and Foundation. Using Less or Sass, you can create this kind of menu quite quickly.
Nick Pettit
Treehouse TeacherHi hackey james,
I'm not really sure which navigation you mean. There's navigation on the left side, sorting at the top, and filters on the right. You might also be referring to our home page for logged out site visitors (the one with the picture of the woman in the coffee shop).
Can you take a screenshot of the part of the screen you're referring to?
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 PointsNick Pettit the navigation on the left side of the page after you logged in. it shows home,track,library and forum when you hover the mouse the icons.
Nick Pettit
Treehouse TeacherThe container div on that navigation uses fixed positioning so that it's always on the left side of the screen. Inside, the icons are created using an SVG sprite sheet.
You can view the code by right clicking on the element in the Google Chrome web browser and then select "Inspect element" from the context menu. To learn more about the Chrome Dev Tools, check out this course.