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
Megan Carroll907 Points
How to Build a Toggle-able Sidebar Menu Like Treehouse's?
Hi all. I have been trying to figure out how to build a toggle-able sidebar menu with icons (like the one right here on Treehouse or the one in the Wordpress dashboard), and I have had no luck. I feel like I've searched to the end of the Internet and come up blank.
- I want the menu to initially load with the icons and titles.
- When the user clicks the collapse icon, it should collapse the titles to show just the icons.
- The main content (everything to the right of the menu) should resize accordingly as the menu is toggled.
- And, the menu should stay toggled closed (or open, whatever the user prefers) as the user navigates across the site.
I am building my site with Foundation. I have a sidebar menu set up with Foundation's icon bar, and I was able to sort of get some jQuery working to toggle the titles closed, but for some reason, on the initial page load, all my <li> tags are different widths. When you toggle the menu open and closed, they all line up. But not til you toggle it the first time. And, I couldn't figure out how to get the main content to resize with the toggle. Also, I couldn't figure out how to get the menu to 'remember' whether it was open or closed as you navigate to different pages.
Here's a jsFiddle so you can see what the heck I'm talking about: http://jsfiddle.net/regularmegs/2vweLpnf/1/
Does anyone have any experience building a menu like this? I'd really appreciate any help you guys can give. I'm at a loss on how to achieve this.
Stephen O'Connor22,291 Points
Two menu systems I use a lot are which are similar are:
Which can both be found here, http://tympanus.net/codrops/tag/menu/
They might not answer your question specifically but could point you in the right direction.
Those are always tricky. I wasn't able to set a width for the a tag for some reason (I'm sure you tried doing the same thing). I set the background to the whole ul instead, and that fixed the issue with the boxes not being sized right, but now I'm getting a weird side effect where the letters shift up and down. I noticed that the same thing is happening with the Treehouse navigation though, but it doesn't look weird because they are using CSS transitions so it does it smoothly.
Here's my jsFiddle for what I did (only changed the background image) . I'll help you more later today when I have more time if you still need help. My suggestion is, make two states of your nav using CSS only. One for the collapsed nav, another for the uncollapsed. Then only use jQuery to toggle these states on and off (probably by toggling a class on and off of the ul element). Finally, you can add CSS transitions to both states so it looks nice and smooth :)
Hey I was checking out Mat Helme's Dribble and found this CodePen of a nav that reminded me of what you were trying to do here, so I thought I'd post. He basically does what I alluded to. On click, the JS just toggles a few classes onto certain elements, and all the animations are done through CSS. I hope it helps!