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?

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?

• javascript
• jquery
• html
• css
• sidebar

Share Improve this question Follow edited Dec 5, 2018 at 21:03 Ahsan Alam Siddiqui asked Dec 5, 2018 at 19:44 Ahsan Alam SiddiquiAhsan Alam Siddiqui 7122 silver badges1212 bronze badges 5

• ok let me edit the post – Ahsan Alam Siddiqui Commented Dec 5, 2018 at 19:51
• @cale_b here is my fiddle jsfiddle/hThGb/8821 But on fiddle my jquery is not working. On my code editor it is working – Ahsan Alam Siddiqui Commented Dec 5, 2018 at 19:56
• @cale_b i have updated my post please check. Now my fiddle is working fine. Now tell me please that how can i make whole screen semi-black except sidebar? – Ahsan Alam Siddiqui Commented Dec 5, 2018 at 20:11
• Thank You so much. I will surely cleanup my fiddle. Can you please fix guide me one more thing? I have hamburger icon inside my sidebar. But it's not appearing. I don't know why. And also please mention your modified fiddle in your answer so that i can accept – Ahsan Alam Siddiqui Commented Dec 5, 2018 at 21:56
• @cale_b i fixed it. Thanx. Can you put your correct fiddle in answer so i can accept your answer an upvote. – Ahsan Alam Siddiqui Commented Dec 6, 2018 at 5:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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;
}

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/cale_b/hThGb/8849/

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); }