除了侧边栏div之外，如何更改整个身体的背景颜色

Question

单击菜单按钮后，如何叠加和调暗屏幕？

<ul id="gn-menu" class="gn-menu-main">
                <li class="gn-trigger">
                    <a class="gn-icon gn-icon-menu"><span>Menu</span></a>
                    <nav class="gn-menu-wrapper">
                        <div class="gn-scroller">
                            <ul class="gn-menu">
                                <li class="gn-search-item">
                                    <input placeholder="Search" type="search" class="gn-search">
                                    <a class="gn-icon gn-icon-search"><span>Search</span></a>
                                </li>
                                <li>
                                    <a class="gn-icon gn-icon-download">Downloads</a>
                                    <ul class="gn-submenu">
                                        <li><a class="gn-icon gn-icon-illustrator">Vector Illustrations</a></li>
                                        <li><a class="gn-icon gn-icon-photoshop">Photoshop files</a></li>
                                    </ul>
                                </li>
                                <li><a class="gn-icon gn-icon-cog">Settings</a></li>
                                <li><a class="gn-icon gn-icon-help">Help</a></li>
                                <li>
                                    <a class="gn-icon gn-icon-archive">Archives</a>
                                    <ul class="gn-submenu">
                                        <li><a class="gn-icon gn-icon-article">Articles</a></li>
                                        <li><a class="gn-icon gn-icon-pictures">Images</a></li>
                                        <li><a class="gn-icon gn-icon-videos">Videos</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div><!-- /gn-scroller -->
                    </nav>
                </li>
                <li><a href="http://tympanus.net/codrops">Codrops</a></li>
                <li><a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/HeaderEffects/"><span>Previous Demo</span></a></li>
                <li><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=16030"><span>Back to the Codrops Article</span></a></li>
            </ul>

用户点击此处（按钮）

边栏右侧打开（这里我想用背景颜色制作整个屏幕：rgba（0,0,0，.9）;右边栏除外）

任何提示或帮助将被高度挪用，ui在我的场景中工作非常复杂，我是Java开发人员，创建我的个人网站..我已经学习了css＆amp; jquery也是初学者。

Answer 1

尝试使用jQuery

加载

$(function() {
  // create toggle flag
  var clicked = false;
  // cache `header` `css`
  var bg = $("header").css(["background", "opacity", "width"]);
  $("a.gn-icon").on("click", function() {
    if (clicked === false) {
      // set dimmed screen
      $("header").css({"background": "rgba(0, 0, 0, .9)"
                      , "opacity":"0.25"
                        // `355`: `.gn-menu` `width`
                      , "width":window.innerWidth - 355
                      , "float":"right"});
      // reset `clicked` flag
      clicked = true;
    } else {
      // reset `header` `css` to initial
      $("header").css(bg);
      // reset `clicked` flag
      clicked = false;
    }
  });
});

Answer 2

一种方法是在box-shadow: inset -9999px 0 0 0 rgba(0, 0, 0, 0.25);元素上使用header。

另一种方法是更改​​background-color元素的header。

最后一种方法是使用覆盖页面的巨大div。将菜单设置为比z-index更高的div。

这些样式应该应用于庞大的div：

z-index: 100;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;

这些样式到Nexus菜单：

z-index: 1000;
position: /* Anything but static */