如何在侧边栏上打开整个屏幕半黑？

Question

我使用css和jquery构建了侧边栏。它工作正常，但我希望在侧边栏打开时，除侧边栏以外的整个屏幕都应变为半黑色或禁用状态。

这是我的工作     jsFiddle

如何使整个屏幕变为半黑或在侧边栏处于禁用状态？

Answer 1

您可以在侧边栏上使用方框阴影：

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

这是黑色的，透明度为.50。设置为10000px以覆盖整个屏幕。

或将rgba（0,0,0，.50）更改为＃5a5a5a等纯色。

在您的情况下，添加到CSS：

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

Answer 2

1. 在导航下方创建一个内容div。像这样：

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

2. 添加一些样式，使其具有最小高度等。

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

3. 添加一些JS，以便在单击导航菜单按钮时，可以在该区域打开和关闭新的样式类。

   $（'＃show-hide-menu'）。click（function（）{

   if（$（“ div＃maincontent”）。hasClass（“ overlayed”））{     $（“ div＃maincontent”）。removeClass（“ overlayed”）;   }   其他{     $（“ div＃maincontent”）。addClass（“ overlayed”）;   } }）;

4. 在CSS中定义覆盖的类。

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

Answer 3

实现此目的的一般概念非常简单：

1. 修改JavaScript，以在打开导航栏时将类添加到body（我称之为nav-open。）
2. 修改CSS，以便在正文具有类nav-open时显示“ overlay”元素（您已经放置了一个元素）
3. 调整叠加层CSS使其正确显示（出于某种原因，它上面有opacity: 0，这表示它有，但不可见< / em>）。

以下是相关的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;
}

这是您的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');
       }
     });
});

这里是指向您的小提琴的链接，并通过以下更改进行了修改以执行您想要的操作：http://jsfiddle.net/cale_b/hThGb/8849/