Мобильное меню - CSS / DIV - затемнить видимый фон вокруг меню? - PullRequest
0 голосов
/ 14 февраля 2020

Когда откроется мое мобильное меню, мне бы хотелось, чтобы остальная часть видимого фона (кроме самого меню) была тусклой. (Мои страницы и фон меню в целом очень белые).

Существует плагин, который предлагает эту функцию, но, пытаясь сохранить свет на сайте, я пытаюсь понять, возможно ли это с помощью всего лишь нескольких строк code?

Долгое время гуглил не придумал ничего, кроме приложения, которое удивляет ... может быть, я искал не те ключевые слова?

Есть идеи?

Вот мой полный код (не мой оригинальный код, может связать различные части с их соответствующими авторами).

/*Change hamburger menu colour*/
span.mobile_menu_bar:before{
  color:#D7AF39;
}

/*Remove shading of top menu to match sub menu*/
.et_mobile_menu .menu-item-has-children a {
    background-color:#FFFFFF;
}

/** Divi Space slide in mobile edits**/

#mobile_menu { display: block !important; min-height: 100vh; top: 0; border-top: none; padding-top: 80px; z-index: 9998; }

.mobile_nav.closed #mobile_menu {
 transform: rotateY(90deg); -webkit-transform: rotateY(90deg);
 transform-origin: right; -webkit-transform-origin: right;
 background: #fff; transition: .8s ease-in-out !important; }

.mobile_nav.opened #mobile_menu {
 transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
 transform-origin: right; -webkit-transform-origin: right;
 background: #fff; transition: .8s ease-in-out; }

.mobile_nav.opened .mobile_menu_bar:before {
 content: "\4d"; color: #D7AF39; }

.et_mobile_menu li a, .et_mobile_menu .menu-item-has-children>a {
    font-weight: 600;
        font-family: open sans;
        font-size: large;
}

@media(max-width: 980px) {

.et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar { z-index: 9999; }

#main-header .container.clearfix.et_menu_container { width: 100%; }

.logo_container { padding-left: 30px; }

#et-top-navigation { padding-right: 30px; }

}

@media(min-width: 341px) {

#mobile_menu { width: 340px; margin-left: calc(100% - 340px); }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...