Как сделать затемнение фона при открытии мобильного меню?

Question

Подскажите пожалуйста, что необходимо дописать в JS код, чтобы при открытии моб. меню, фон затемнялся??

jQuery('.menu-icon').click(function() {
  jQuery(this).toggleClass('opened'); }); 


$('.icon').on('click', function(){
 $('.mobile-list').slideToggle(); });


$('.icon').on('click', function(e) {
  e.preventDefault();
  $('.mobile-menu').toggleClass('mobile-menu_active'); })

Answer 1

Добавь к меню ещё один класс и к нему допиши :before, который будет растянут по всему экрану с необходимым затемнением, по открытии добавляй этот клас, при закрытии убирай.

Answer 2

Тут обычно три глобальных сущности. Они все [обычно] абсолютного позиционирования, независимы друг от друга, и растянуты на весь экран.

И все три сущности наложены друг на друга, следом поверх друг друга.

Суть следующая. У вас есть некие странички, вот эти странички должны быть в первой абсолютно позиционируемой сущности.

Третья абсолютно позиционируемая сущность - это меню.

А вторая абсолютно позиционируемая сущность - это как раз таки это самое затемнение. Оно независимо от меню, и от странички тоже. Но оно между страничкой и меню. Когда нужно отображается, и когда не нужно - не отображается.

Иначе говоря, таким же образом формируются всякие абсолютные сущности, окошки, варнинги, всякие штуковины выскакивающие, которые имеют абсолютное позиционирование.

Псевдокод:

<div>
    <div style="position:absolute; visibility:visible;">
        Здесь вся страничка __на весь экран__, кроме меню и затемнялки.
    </div>
    <div style="position:absolute; visibility:hidden;">
        Здесь затемнялка __на весь экран__.
    </div>
    <div style="position:absolute; visibility:hidden;">
        А здесь меню __на весь экран__.
    </div>
</div>

Здесь вёрстка строится "абсолютными слоями", "слои" идут друг над другом, потому что так позиционированы.

И естественно вы получаете независимое поведение "слоёв", что сильно важно. Иначе говоря, при такой структуре вёрстки "абсолютными слоями" управление всем этим получается очень кучерявым, позволяет наделать весьма годных эффектов, при этом не тормозных. И независимых друг от друга.

П.с.: Когда написано про меню на весь экран - не следует понимать, что это меню растянутое на весь экран. Вовсе нет. Это абсолютный блок на весь экран, а меню может быть где то сбоку этого абсолютного блока.

П.п.с.: Такой подход позволяет легко добавлять ещё абсолютно позиционируемые сущности. Они обычно бывают, ещё и ещё.

Answer 3

Если поддержка браузеров не позволяет использовать <dialog>, то я бы сделал на css с помощью box-shadow:

.modal {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;

  padding: 1em;
  background: antiquewhite;
  
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .75);
}

<p>Подскажите пожалуйста, что необходимо дописать в JS код, чтобы при открытии моб. меню, фон затемнялся??
<p>Подскажите пожалуйста, что необходимо дописать в JS код, чтобы при открытии моб. меню, фон затемнялся??
<p>Подскажите пожалуйста, что необходимо дописать в JS код, чтобы при открытии моб. меню, фон затемнялся??
<p>Подскажите пожалуйста, что необходимо дописать в JS код, чтобы при открытии моб. меню, фон затемнялся??
<p>Подскажите пожалуйста, что необходимо дописать в JS код, чтобы при открытии моб. меню, фон затемнялся??
<p>Подскажите пожалуйста, что необходимо дописать в JS код, чтобы при открытии моб. меню, фон затемнялся??
<p>Подскажите пожалуйста, что необходимо дописать в JS код, чтобы при открытии моб. меню, фон затемнялся??
<p>Подскажите пожалуйста, что необходимо дописать в JS код, чтобы при открытии моб. меню, фон затемнялся??

<div class="modal">Оверлей</div>

БЛОГ НА HUSL

Как сделать затемнение фона при открытии мобильного меню?

Ответы (3 шт):