Как сделать так, чтобы весь экран был наполовину черным на боковой панели?

Question

У меня есть сборка боковой панели с css и jquery.Работает нормально, но я хочу, чтобы при открытии боковой панели весь экран, за исключением боковой панели, становился полутеневым или отключенным.

Вот моя работа jsFiddle

Как мне сделатьвесь экран полуматовый или отключен на боковой панели?

Answer 1

1. Создайте раздел содержимого под вашей навигацией.Что-то вроде:

   <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");} else {$ (" div # maincontent "). addClass (" overlayed ");}});

4. Определить наложенный класс в CSS.

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

Answer 2

Общая концепция для достижения этой цели довольно проста:

1. Измените JavaScript, чтобы добавить класс в body, когда навигация открыта (я назвал его nav-open.)
2. Измените CSS так, чтобы элемент "overlay" (у вас уже был его элемент) отображался, когда тело имеет класс nav-open
3. Настройте CSS элемента overlay, чтобы он правильно отображался(по какой-то причине на нем было opacity: 0, что означало там , но не было видимым ).

Вот соответствующий 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/

Answer 3

Вы можете использовать тень на боковой панели:

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

Это черный цвет с прозрачностью .50.Он установлен на 10000 пикселей, чтобы покрыть весь экран.

Или замените rgba (0,0,0, .50) на сплошной цвет, например # 5a5a5a.

В вашем случае добавьте к вашему css:

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