Ändern Sie den Alpha-Wert des Körpers, wenn das Seitenmenü geöffnet ist

Question

Ich habe die Hintergrundfarbe für Body-Tag in CSS mit rgba Werte festgelegt. Ich möchte den Alpha-Wert ändern, wenn das Seitenmenü geöffnet ist, und es zurückstellen, wenn das Seitenmenü geschlossen ist.

Ich habe das Seitenmenü mit dem Quellcode erstellt, der im folgenden Link angegeben ist. http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/

In CSS:

body { 
    background: rgba(1,1,1,0); 
} 

ich die Klasse gn-Menü für Seitenmenü verwendet und verändert den Alpha-Wert in

body.gn-menu gn-open-all { 
    background: rgba(1,1,1,0.8); 
} 

versuchte auch Opazität in

body.gn-menu gn-open-all { 
    -webkit-transition: opacity 300ms ease-in-out; 
    transition: opacity 300ms ease-in-out; 
    opacity: 0.8; 
} 

Wenn ich das in der Klasse gn-menu gn-open-all gegeben habe, dann Hintergrund -color wird für die Elemente im Menü geändert.

Aber der Alpha-Wert hat sich nicht geändert.

Wie kann ich den Alpha-Wert ändern?

Danke.

Answer 1

Ihre CSS-Regel ist falsch, wenn Sie die Deckkraft des gesamten Tags ändern möchten.

Lösung:

body { 
    background: rgba(1,1,1,0); 
} 

body.opened-menu { 
    background: rgba(1,1,1,0.8); 
} 

Dann ändern Sie die _openMenu/_closeMenu Funktion der opened-menu Klasse, um den Körper hinzuzufügen. Sie könnten jQuery oder einfaches Javascript verwenden.

_openMenu : function() { 
    if(this.isMenuOpen) return; 
    classie.add(this.trigger, 'gn-selected'); 
    this.isMenuOpen = true; 
    classie.add(this.menu, 'gn-open-all'); 
    //add class to body 
    document.getElementsByTagName("body")[0].classList.add("opened-menu") 
    this._closeIconMenu(); 
}, 
_closeMenu : function() { 
    if(!this.isMenuOpen) return; 
    classie.remove(this.trigger, 'gn-selected'); 
    this.isMenuOpen = false; 
    classie.remove(this.menu, 'gn-open-all'); 
    //remove class to body 
    document.getElementsByTagName("body")[0].classList.remove("opened-menu") 
    this._closeIconMenu(); 
} 

Simone

Answer 2

Sie können dies tun, indem Sie Ihrem Body-Container eine CSS-Klasse hinzufügen, wenn das Seitenmenü geöffnet ist, und sie dann entfernen, wenn das Seitenmenü geschlossen ist. Und indem Sie diese CSS-Klasse fangen, können Sie das Alpha Ihres Containers ändern.