サイドメニューが開いているときに本文のアルファ値を変更します

Question

bodyタグの背景色をrssの値を使ってCSSで設定しました。サイドメニューが開いている場合はアルファ値を変更し、サイドメニューが閉じている場合は元に戻したいと思います。

次のリンクに記載されているソースコードを使用してサイドメニューを作成しました。 CSSで http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/

：私はサイドメニューのクラスGN-メニューを使用し、

​​

にアルファ値を変更した

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

も

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

に不透明度を試みました

私がクラスgn-menu gn-open-allでこれを与えた場合、背景メニュー内の項目の色が変更されます。

しかし、アルファ値は変更されませんでした。

アルファ値を変更するにはどうすればよいですか？

ありがとうございました。

Answer 1

タグ全体の不透明度を変更する場合は、CSSルールが間違っています。

ソリューション：次に

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

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

体にopened-menuクラスを追加する_openMenu/_closeMenu機能を変更します。あなたはjQueryまたはプレーンなJavaScriptを使うことができます。

_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(); 
} 

シモーネ

Answer 2

サイドメニューが開いているときにbodyコンテナにCSSクラスを追加し、サイドメニューが閉じているときにCSSクラスを削除すると、これを行うことができます。そのcssクラスをキャッチすることで、コンテナのアルファ値を変更することができます。