Wrapper bei Menü hover ausgrauen

[anubiz]

Hallo, ich würde gerne den gleichen effekt wie auf http://lanxess.de/de/corporate/home/ zu sehen auf meiner webseite benutzen. also bei hover übers menü den wrapper ausgrauen. könnt ihr mir da weiterhelfen?

 

[FebsDeluxe]

Das kannst du ganz einfach mit einem transparenten bild machen, dass einen grauen schleier hinterlässt ...
Also einer grauen, 1x1px großen png eine transparenz verpassen ...

Dann den Bereich vom hover im menü so groß wie den wrapper machen, und in diesem bereich das aufgeklappte menü definieren (wo es vorher auch war)
Und die 1x1px datei als background von dem aufgeklappten menü

Ist zwar bissl umständlich aber ist das erste was mir einfällt

 

[Cheffchen]

Hallo,

und ist auch mehr oder weniger genau so wie die das gemacht haben :O)
so umständlich ist das nicht :O)

<div id="blockShader"></div>

etwas css

#lxs-main-wrapper #blockShader {
    background: url("../images/backgrounds/block-shader.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 70;
}

der rest ist 3zeilen jquery für das ein und ausblenden wenn menü hover ist.

Cheffchen

 

[Bennyville]

Eine andere Möglichkeit wäre, dass Div direkt hinter die Nav zu packen und mit dem „Adjacent Sibling“-Selector zu arbeiten. Dann spart man sich das JQuery-Gedöns, man muss allerdings den Browser-Support berücksichtigen.

Sollte ab dem IE8 funktionieren. Safari hat da aber wohl einige Probleme mit. :/

Beispiel: http://jsfiddle.net/sFHjh/