1

Есть меню на jsfiddle.net/2zxjbxsf/ Как можно сделать затемнение блока с текстом после открытия меню и убрать затемнение текста после закрытия меню ?

$("#showmenu").click(function(e){
            e.preventDefault();
            $("#menu").toggleClass("show");
        });
        $("#menu a").click(function(event){
            event.preventDefault();
            if($(this).next('ul').length){
                $(this).next().toggle('fast');
                $(this).children('i:last-child').toggleClass('fa-caret-down fa-caret-left');
            }
});
3
  • "затмение меню с текстом" - это имеется ввиду текст самой страницы "притушить" надо?
    – cyadvert
    14 янв 2016 в 19:43
  • @cyadvert Да вы правы, немного не так написал.
    – user199209
    14 янв 2016 в 19:47
  • @cyadvert Спасибо работает.
    – user199209
    14 янв 2016 в 19:59

3 ответа 3

4

Добавьте CSS

.overlay {
    background-color: rgba(0,0,0,0.7); 
    height: 100%;
    position: absolute;
    width: 100%;
}

В JS после $("#menu").toggleClass("show"); добавьте

if ($("#menu").hasClass('show')) {
    $('<div class="overlay">&nbsp;</div>').prependTo($('body'));
} else {
    $('.overlay').remove();
}
2
  • jsfiddle.net/2zxjbxsf/2 я так понимаю для иконки меню, всё-таки надо использовать явно не jpg картинку, хотя бы png c прозрачностью, как вариант: сверстать в css или отрисовать svg
    – Shilgen
    14 янв 2016 в 20:06
  • @Shilgen Да я знаю, я только для примера поставил картинку, чтобы не загружать щрифты с иконками.
    – user199209
    14 янв 2016 в 20:14
3

https://jsfiddle.net/r780bh5r/2/ добавьте саму затемнялку в конец

<div class="milk-shadow"></div>

css

.milk-shadow {
  position: fixed;
  top:0; right:0; left:0;
  height: 0;
  background-color: #000;
  opacity: 0;
  -webkit-transition: opacity .5s;
  transition: opacity: .5s;
}
#menu.show ~ .milk-shadow {height: 100%; opacity: .3;}

js - плюс в юзабилити - убираем меню при клике "в молоко"

$(document).on('click','.milk-shadow',function(){
    $("#showmenu").click();
});

Хозяйке на заметку - можно менять класс не у меню а у боди, тогда можно будет ещё допрописать у боди overflow:hidden чтобы он не скролился при открытом меню

2

добавьте в html:

<div class="blackout"></div>

добавьте в css:

.blackout {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  background: rgba(0,0,0,.5);
  z-index: 5;
  display: none;
}

и по открытию меню добавьте в скрипт $(".blackout").css("display", "block");, а по закрытию, соответственно, $(".blackout").css("display", "none");

2
  • Тоже хороший вариант, только нет проверки когда меню открыто, а когда закрыто. Не могу поставить плюсик так как нужно иметь 15 баллов репутации, но все равно спасибо.
    – user199209
    14 янв 2016 в 20:08
  • @Denis благодарствую)
    – lexxl
    15 янв 2016 в 9:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.