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

Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Menu Toggle

HI,

If you look at this website on mobile version here

I need to reduplicate the same effect. So when i click the hamburger menu, the sidebar slides off in position fixed i suppose, with that extra black opacity .5 background, that when i click on it the menu hides.

I can do this, but simple version, without the effect and such, heres what i go http://codepen.io/Aurelian/pen/NxZqRb which i did time ago.. but if i can put the black background opacity .5 and when click it ithe menu disapears? and this shoudl cover all, so it shoudl be fixed i suppose whih the transition wont work i suppose.

1 Answer

David Bath
David Bath
25,940 Points

One simple way you can simulate this effect is to first add a class to the CSS:

.course-sidebar.open ~ main {
  background-color: #888;
  transition: background-color .5s;
}

and then add some script to hide the effect when the main content area gets clicked:

  $('main').on('click', function(){
    $('.course-sidebar').removeClass('open');
  });

This won't actually give you an "overlay" with opacity, but depending on your original background color this could work. Otherwise you can add an absolutely-positioned element that has a black background and .5 opacity and overlay that over main, and similarly show/hide it when the menu is shown.