Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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

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

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

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

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.

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!