如何使整个屏幕变黑并突出显示菜单？

Question

我正在努力实现我的菜单将被突出显示，并且在单击事件时整个屏幕应该变暗，与此图像 image 中的完全相同。我编写了 jquery 代码，但它只捕获点击事件以执行 fadeToggle 操作

我很困惑如何正确地做到这一点。

$(document).ready(function() {
  $("#button").click(function() {
    $('.slide').fadeToggle(500);
  });
});

/* Header */

#main_header {
  opacity: 1;
  width: 100%;
  height: 50px;
  background: #f0f0f0;
  position: relative;
  width: 100%;
}

#main_header .text_ru {
  font-size: 15px;
  color: rgb(12, 89, 163);
  text-transform: uppercase;
  text-align: center;
  width: 18px;
  height: 11px;
  display: inline-block;
  font-weight: 500;
  margin-left: 20px;
}

p.text_ru {
  line-height: 1.929;
}

#main_header .left_header {
  float: left;
}

#main_header .right_header {
  float: right;
  padding: 15px 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="main_menu">
  <div id="menu">
    <ul class="slide">
      <li><a href="#">Поиск строения</a></li>
      <li><a href="#">Оплатить ком услуги</a></li>
      <li><a href=#>Обратиться за помощью</a></li>
      <li><a href=#>Управляющая компания</a></li>
      <li><a href="second_page.html">Обратиться в Акимат</a></li>
      <li><a href=#>Объявления</a></li>
      <li><a href="page.html">Информация о строении</a></li>
      <li><a href=#>Обсуждения</a></li>
      <li><a href=#>Помощь</a></li>
    </ul>
  </div>
  <section id="main_header">
    <div class="left_header">
      <a href="index.html"><img src="svg/logo.svg" alt="logo" style="height: 16px; padding-left: 15px;"></a>
      <p class="text_ru">ru</p>
    </div>
    <div class="right_header">
      <img class="btn search" src="svg/search.svg" alt="search" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer; ">
      <img class="btn" src="svg/pro.svg" alt="pro" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;">
      <img id="button" class="btn" src="svg/sandwich.svg" alt="sandwich" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;">
    </div>
  </section>
</header>

Answer 1

    $(document).ready(function(){
    alert('gsdf')
    $("#button").click(function(){
        $('.darklayer').toggleClass('active');
    });
});

body{margin:0; padding:0;}
#main_menu{position: absolute; z-index: 2; width: 100%;  }
#main_header{
    opacity: 1;
    width: 100%;
    height: 50px;
    background: #f0f0f0;
    position: relative;
    width: 100%;     z-index: 2;
}
#main_header .text_ru {
    font-size: 15px;
    color: rgb(12, 89, 163);
    text-transform: uppercase;
    text-align: center;
    width: 18px;
    height: 11px;
    display: inline-block;
    font-weight: 500;
    margin-left: 20px;
}
p.text_ru {line-height: 1.929;}

#main_header .left_header {
    float: left;
}
#main_header .right_header {
    float: right;
    padding: 15px 15px;
}
.darklayer{position: absolute; width: 100%; height: 100%; background:#000; position: fixed; z-index: 1; display: none;}
.darklayer.active{display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="darklayer"></div>
<header id="main_menu">
        <div id="menu">
            <ul class="slide">
                <li><a href="#">Поиск строения</a></li>
                <li><a href="#">Оплатить ком услуги</a></li>
                <li><a href=#>Обратиться за помощью</a></li>
                <li><a href=#>Управляющая компания</a></li>
                <li><a href="second_page.html">Обратиться в Акимат</a></li>
                <li><a href=#>Объявления</a></li>
                <li><a href="page.html">Информация о строении</a></li>
                <li><a href=#>Обсуждения</a></li>
                <li><a href=#>Помощь</a></li>
            </ul>
        </div>
        <section id="main_header">
            <div class="left_header">
                <a href="index.html"><img src="svg/logo.svg" alt="logo" style="height: 16px; padding-left: 15px;"></a>
                <p class="text_ru">ru</p>
            </div>
            <div class="right_header">
                <img class="btn search" src="svg/search.svg" alt="search" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer; ">
                <img class="btn" src="svg/pro.svg" alt="pro" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;">
                <img id="button" class="btn" src="svg/sandwich.svg" alt="sandwich" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;">
            </div>
        </section>
    </header>