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
garylaw
14,632 PointsHow to make a left vertical navigation bar like the one on treehouse?
Could somebody tech me or could treehouse teachers make a short demo on how to make a left vertical navigation bar like the one on treehouse?
Thx so much~
4 Answers
Unsubscribed User
7,962 PointsGary -
While it doesn't have the bells & whistles of Treehouse's nav (icons, tooltips), I built a quick little example you could play around with. Hopefully the comments help shed light on what's going on. Let me know if I can explain anything!
Najira Gunaratne
266 PointsWhilst it may not be what you're exactly after, this might be a handy starting point - http://foundation.zurb.com/docs/components/offcanvas.html
Adam Sackfield
Courses Plus Student 19,663 PointsGood link Foundation has a very similar sidebar navigation.
Mohammed Hussain
30 PointsOff-canvas element offers left vertical navigation bar.
See this link: http://ieatcss.com/zurb-foundation-framework-tutorials/zurb-foundation-elements-navigation.html
This link explains off-canvas with step by step example.
Adam Sackfield
Courses Plus Student 19,663 PointsA good understanding off CSS and HTML would be a start, but you would need to do the following things to the Nav
Position it fixed to the left of the screen, then use jQuery to the width on click.