Como hacer el siguiente efecto

[dgtotero]

Bueno, no conozco mucho del tema, pero quisiera saber si conocen o me podrían explicar como realizar este efecto.

Al pasar el mouse por alguna de las categorías del menú y abrirse el dropdown menú, se oscurece todo el resto de la pantalla dándole una mejor experiencia al usuario, haciendo más llamativo las subcategorías.



Debe ser un efecto simple, lo estoy intentado realizar para un sitio magento.

Muchas gracias de antemano.

Saludos!!!

[Alexis88]

Puedes tener un <div> que ocupe el 100% de ancho y alto de la pantalla, darle un fondo opaco y colocar el menú algunos niveles por encima de este con la propiedad z-index de CSS. Luego, cuando muestres el menú, también muestras ese fondo y cuando lo ocultes, también ocultas el fondo.

Saludos

[dgtotero]

Alexis gracias por responder, estuve intentando y no me da resultado. Aunque sé que estoy ya no sería Javascript, te consulto:

Este es el código html

Código HTML:

<div id="pt_menu8" class="pt_menu last active">
<div class="parentMenu">
<a href="http://xxx.com/lenceria.html">
<span>Lencería</span>
</a>
</div>
<div class="wrap-popup">
<div id="popup8" class="popup" style="top: 566px; left: 1px; width: 540px; display: block;">
<div class="arrow-left-menu" id="arrow-left-menu8">
</div>
<div class="box-popup">
<div class="block2">

                
		<div class="custom-menu-bottom">
		<div class="menu-bottom images">
		<div class="cus-image"><img src="http://xxx.com/media/wysiwyg/bottom-left-menu.png" alt=""></div>
		</div>
		<div class="menu-bottom images1">
		<div class="cus-image"><img src="http://xxx.com/media/wysiwyg/bottom-left-menu.png" alt=""></div>
		</div>
		<div class="menu-bottom images2">
		<div class="cus-image"><img src="http://xxx.com/media/wysiwyg/bottom-left-menu.png" alt=""></div>
		</div>
		</div>
		
            
</div>
</div>
</div>
</div>
</div> 

Código CSS:

.megamenu-title {
    display: inline-block;
    width: 100%;
    background: url("../images/bg-category.png") no-repeat 13px 20px #e02f50;
    padding: 0;
    border-bottom: 3px solid #a80624;
}
.megamenu-title h2 {
    display: inline-block;
    padding: 15px 12px 12px 30px;
    margin:0 0 -3px 45px;
    border-left: 1px solid #fff;
    color: #fff;
    /*font-family: 'titilliumwebsemibold';*/
    font-family: 'Open Sans', sans-serif;
    font-weight:600;
    font-size: 16px;
    text-transform: uppercase;
}
 
.pt_vmegamenu .itemMenu h4.level1 span,
.pt_vmegamenu .itemMenu a.level1 span{
    background: url("../images/bg-f-title1.png") no-repeat left bottom;
    display: inline-block;
    line-height: 19px;
    padding: 0 0 10px;
    /*font-family: 'titilliumwebsemibold';*/
font-family: 'Open Sans', sans-serif;
font-weight:600;
}
.pt_vmegamenu .col2 .itemMenu h4.level1 span,
.pt_vmegamenu .col2 .itemMenu a.level1 span{
    background: url("../images/bg-f-title2.png") no-repeat left bottom;
}
.pt_vmegamenu .col3 .itemMenu h4.level1 span,
.pt_vmegamenu .col3 .itemMenu a.level1 span{
    background: url("../images/bg-f-title3.png") no-repeat left bottom;
}
.pt_vmegamenu .itemSubMenu a.level2:hover,
.pt_vmegamenu .itemMenu a.level1.nochild:hover{
    color: #e02f50;
}
.pt_vmegamenu .itemMenuName:hover span {
    color: #e02f50;
}
.pt_vmegamenu div.popup a.actParent {
    color: #777;
}
.pt_vmegamenu div.popup a.act {
    color: #e02f50 !important;
}
.pt_vmegamenu div.pt_menu .parentMenu span.block-title:hover,
.pt_vmegamenu div.pt_menu .parentMenu a:hover{
    background:url("../images/bg-left-menu-hover.png") no-repeat 90% 50% #f9f9f9;
    border-left: 4px solid #e02f50;
    color: #e02f50;
}
.pt_vmegamenu div.pt_menu .parentMenu.noSubMenu a:hover,.pt_vmegamenu div.pt_menu .parentMenu.noSubMenu span.block-title:hover{
    background: none;
    border-color:#e02f50;
    color: #e02f50;
}
.pt_vmegamenu #pt_menu_link ul li a.act,
.pt_vmegamenu #pt_menu_link ul li a:hover,
.pt_vmegamenu div.pt_menu.act .parentMenu a{
    background:url("../images/bg-left-menu-hover.png") no-repeat 90% 50% #f9f9f9;
    border-color:#e02f50;
    color: #e02f50;
}
.pt_vmegamenu div.pt_menu.active .parentMenu a {
    background:url("../images/bg-left-menu-hover.png") no-repeat 90% 50% #f9f9f9;
    border-color:#e02f50;
    color: #e02f50;
}
.pt_vmegamenu div.pt_menu.act .noSubMenu a {
    background:#f1f1f1;
    border-color:#e02f50;
    color: #e02f50;
}
.pt_vmegamenu div.pt_menu .noSubMenu a,
.pt_vmegamenu div.pt_menu .noSubMenu span.block-title{
    background: #f7f7f7;
}
.pt_vmegamenu div.pt_menu .noSubMenu span.block-title:hover, .pt_vmegamenu div.pt_menu .noSubMenu a:hover {
    background: #f1f1f1;
    border-color:#e02f50;
    color: #e02f50;
}
.pt_vmegamenu div.pt_menu.active .noSubMenu a {
    background: #f1f3f1;
    border-color:#e02f50;
    color: #e02f50;
}
.pt_vmegamenu div.pt_menu .noSubMenu span.block-title:hover,
.pt_vmegamenu div.pt_menu .noSubMenu a:hover{
    background: #f1f1f1;
    border-color:#e02f50;
    color: #e02f50;
}
 

[Alexis88]

Échale un vistazo a este ejemplo que hice hace un tiempo para crear una ventana modal. También usa un fondo opaco que no es otra cosa que un <div> con un color de fondo opaco y al que adapto al tamaño de la ventana. Si tienes alguna duda, no dudes en preguntarme.

Saludos