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

JavaScript

Megan Carroll
Megan Carroll
907 Points
Posted by Megan Carroll
Megan Carroll
907 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.

  1. I want the menu to initially load with the icons and titles.
  2. When the user clicks the collapse icon, it should collapse the titles to show just the icons.
  3. The main content (everything to the right of the menu) should resize accordingly as the menu is toggled.
  4. 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.

3 Answers

Stephen O'Connor
Stephen O'Connor
22,291 Points
Stephen O'Connor
Stephen O'Connor
22,291 Points

Two menu systems I use a lot are which are similar are:

http://tympanus.net/Development/MultiLevelPushMenu/index.html

http://tympanus.net/Blueprints/SlidePushMenus/

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.

Megan Carroll
Megan Carroll
907 Points
Megan Carroll
Megan Carroll
907 Points

Thanks for your reply, Stephen. I had tried to adapt the Codrops Google Nexus tutorial to my site a couple weeks ago, but I had trouble integrating it with Foundation. As for the other two tutorials you suggested, since I am using Foundation, I already have access to Foundation's Off Canvas menu, which acts pretty much like the slide-out menus you suggested.

What I'd like to know is how to keep the icons visible when the menu is toggled "closed." And I'd like the content to resize accordingly. And I'd like the site to 'remember' if the menu was toggled open or closed as the user navigates across the site (instead of only opening on click).

Thanks for your reply, though. I'll see if I can wrangle any of those tutorials into something usable.

Emily Martinez
Emily Martinez
13,096 Points
Emily Martinez
Emily Martinez
13,096 Points

Stephen, thank you! I've been trying to make several different off canvas menus (overlapping menus with back links) and was making a mess of things the deeper I got, especially when trying to reconfigure content/design for responsive. Anyway, I've looked at dozens of JS Fiddles, CodePen snippets, other off canvas options, and your two systems are by far the most useful for the things I have been designing. So, thank you again! You've saved me hours of research and future headaches. :)

Nick Ocampo
Nick Ocampo
15,661 Points
Nick Ocampo
Nick Ocampo
15,661 Points

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 :)

Megan Carroll
Megan Carroll
907 Points
Megan Carroll
Megan Carroll
907 Points

Thanks for your help, Nick. The problem I'm running into with your jsFiddle is that now the gray hover doesn't extend to the edge of the sidebar. I also still have the issues of the right content shifting up and down, and the toggle not staying open.

I'm not sure what you mean by creating two states for my nav. Could you show me what you mean in a jsFiddle?

Thanks again for your help with this.

Nick Ocampo
Nick Ocampo
15,661 Points
Nick Ocampo
Nick Ocampo
15,661 Points

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!