coding: Затемнение всей страницы при открытии выпадающего меню с помощью css

пятница, 17 мая 2019 г.

Затемнение всей страницы при открытии выпадающего меню с помощью css

Возможно ли сделать с помощью только css, чтобы при наведении на меню которое имеет подменю появлялась подложка, которая покрывает всю страницу не считая самого меню и текста с повышенным z-index. Важно, что убрав курсор с подменю или пункта меню с подменю подложка должна убираться. Хочу получить такой результат:

Добавила фон во внутрь выпадающего меню, но получаю эффект мерцания и само меню закрыто подложкой:
.text { position: relative; padding: 15px; background: linear-gradient(to bottom, rgba(206, 220, 231, 1) 0%, rgba(89, 106, 114, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72', GradientType=0); } nav { position: relative; z-index: 99; padding: 0; color: #fff; background-color: #1a2fb0; } ul { display: table; margin: 0; padding: 0; width: 100%; list-style: none; } li { position: relative; display: table-cell; border: 1px solid #6876cb; } a { display: block; padding: 5px; text-align: center; color: #fff; } .dropdown { display: none; position: absolute; z-index: 100; padding: 5px; font-size: 20px; color: #1e2faa; background-color: #fff; box-shadow: 15px 0 15px rgba(0, 0, 0, 0.05); } li:hover .dropdown { display: flex; } .dropdown-bg { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; height: 100vh; width: 100vw; background: rgba(11, 11, 46, 0.7); } a:hover~.dropdown-bg, .dropdown:hover~.dropdown-bg { display: block; }

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Первый +
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Второй +
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Третий
Четвертый

Ответ

Задайте положение через z-index для меню и затемнения.
.text { position: relative; padding: 15px; background: linear-gradient(to bottom, rgba(206, 220, 231, 1) 0%, rgba(89, 106, 114, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72', GradientType=0); z-index: 2; } nav { position: relative; z-index: 99; padding: 0; color: #fff; background-color: #1a2fb0; } ul { position: relztive; display: table; margin: 0; padding: 0; width: 100%; list-style: none; z-index: 2; } li { position: relative; display: table-cell; border: 1px solid #6876cb; } a { display: block; padding: 5px; text-align: center; color: #fff; } .dropdown { display: none; position: absolute; z-index: 100; padding: 5px; font-size: 20px; color: #1e2faa; background-color: #fff; box-shadow: 15px 0 15px rgba(0, 0, 0, 0.05); } li:hover .dropdown { display: flex; } .dropdown-bg { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; height: 100vh; width: 100vw; background: rgba(11, 11, 46, 0.7); z-index: -1; } a:hover~.dropdown-bg, .dropdown:hover~.dropdown-bg { display: block; }

Первый +
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Второй +
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Третий
Четвертый

coding

Страницы

Поиск по вопросам

пятница, 17 мая 2019 г.

Затемнение всей страницы при открытии выпадающего меню с помощью css

Ответ

Комментариев нет:

Отправить комментарий

Страницы

Поиск по вопросам

пятница, 17 мая 2019 г.

Затемнение всей страницы при открытии выпадающего меню с помощью css

Ответ

Комментариев нет:

Отправить комментарий

пятница, 17 мая 2019 г.