How can i make whole screen semi-black on sidebar open?

Question

I have build sidebar with css and jquery . It's working fine but i want that when sidebar opens then whole screen except sidebar should get semi-black or disabled.

Here is my working jsFiddle

How can i make whole screen semi-black or disabled on sidebar open?

Answer 1

You can use a box-shadow on the sidebar:

#sidebar{
 box-shadow:0 0 0 10000px rgba(0,0,0,.50);
}

This is black, at .50 opacity. It's set to 10000px to cover the full screen.

Or change rgba(0,0,0,.50) to a solid color like #5a5a5a.

In your case add to your css:

#slide-out.visible:not(.close){
  box-shadow:0 0 0 10000px #666666;
}

Answer 2

1. Make a content div below your nav. Something like:

   <div id="maincontent" class=""> <p>Lorem.</p> </div>

2. Add some styling so it has min-height, etc.

   #maincontent { width: 100%; height: 100%; padding: 0; margin: 0; min-height: 400px; }

3. Add some JS so when the nav menu button is clicked, it toggles on and off a new style class for this area.

   $('#show-hide-menu').click(function () {

   if ($("div#maincontent").hasClass("overlayed")) { $("div#maincontent").removeClass("overlayed"); } else { $("div#maincontent").addClass("overlayed"); } });

4. Define the overlayed class in the CSS.

   .overlayed { background-color: rgba(0,0,0,.8); }

Answer 3

The general concept to achieve this is fairly straightforward:

1. Modify the javascript to add a class to the body when the nav is open (I called it nav-open .)
2. Modify the CSS so that the "overlay" element (you already had one in place) is displayed when the body has the class nav-open
3. Adjust your overlay element CSS to cause it to show properly (for some reason, it had opacity: 0 on it, which meant it was there , but was not visible ).

Here's the relevant CSS:

#sidenav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  // removed opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 997;
  // set display to none by default
  display: none;
}

// when the body has the class nav-open, display the overlay
.nav-open #sidenav-overlay {
    display: block;
}

Here's the relevant changes to your javascript:

// no-conflict-safe document ready function
jQuery(function($) {
    $('#show-hide-menu').click(function() {
       if ($('#slide-out').hasClass('visible')) {
         // $('#slide-out').removeClass('visible');
         $('#slide-out').toggleClass('close');
       } else {
         $('#slide-out').addClass('visible');
       }

        // check if the nav is "open"
        var open = !$('#slide-out').hasClass('close');

         // for simplicity, always first remove the nav-open from the body
         $('body').removeClass('nav-open');
         // if the nav is open, add the 'nav-open' class to the body
         if (open) {
           $('body').addClass('nav-open');
         }
     });

     // modify to use "on", is best-practice
     // $(document).click(function(e) {
     $(document).on('click', function(e) {
       var sidebar = $(".sidenav, #show-hide-menu");
       if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
         $('#slide-out').toggleClass('close');
         // be sure the nav-open class is removed when the sidebar is dismissed
         $('body').removeClass('nav-open');
       }
     });
});

Here is a link to your fiddle, modified with these changes to do what you want: http://jsfiddle.net/cale_b/hThGb/8849/