Как реализовать вещь, которая изображена на скриншоте?

Question

[StepsOnes]

Как реализовать чтобы при всплытии навигации весь контент позади затемнялся как на

Comments

[Danny Arty]

Поищите в интернете примеры с popup overlay

[Ankhena]

Да хоть тенью.
Или псевдоэлементом.
Или оберткой.

[Anonymous]

можно задать блок с таким бэкграундом на весь размер, затем создать в нем создать блок с навигацией(как по скриншоту)

Answer 1

[Mizutsune]

Данный элемент обычно называется Overlay. Его предназначение заключается не только в том чтобы затемнить область вокруг модального окна или off-canvas меню для наилучшей фокусировки на элементе, но ещё и для того чтобы при клике на данный элемент можно было закрыть окно/меню.

Однако если закрытие по клику не нужно, разумеется можно сделать и тенью и псевдоэлементами как вам подсказали в комментариях.

Или если всё же нужно закрытие по клику, тогда вариантов несколько.

Первый вариант:

Оборачиваете off-canvas меню в обертку для которой устанавливаете полупрозрачный темный фон. При открытии меню, делаете обертку и меню видимыми.

Второй вариант:

Создаёте отдельный элемент для оверлея, задав нужный полупрозрачный темный фон. При открытии меню, делаете оверлей и меню видимыми.

Есть ещё несколько вариантов, но эти два наиболее подходящие для решения подобных задач.

Вот как пример библиотека onoffcanvas.

Answer 2

[Noder SS]

По клику на меню создавайте блок 100% на 100%. Задайте ему полупрозрачный черный беграунд. Не забудьте, что меню, которое вылазить, должно иметь слой выше, чем затемнение. Надеюсь, помог