如何通过 css 为我的菜单添加深色背景？

Question

我正在为我的网站使用 WordPress，我自己 jQuery 创建了一个主菜单，当用户单击菜单按钮时，主菜单将 slideleft。但是有一个大问题：当用户点击菜单区域之外的区域来关闭菜单时，该元素（菜单之外，如按钮）也将被点击。我需要像 Bootstrap Modal 这样的东西，当它出现时，模态周围会变暗，并且通过单击模态外，模态将关闭并且也不会单击任何内容。你明白我的意思吗？

jQuery(document).ready(function($) {

  $('#menubutton').click(function(e) {
    e.stopPropagation();
    $('#menuhidden').toggleClass('menushown');
  });
  $('#menuhidden').click(function(e) {
    e.stopPropagation();
  });
  $('body,html').click(function(e) {
    $('#menuhidden').removeClass('menushown');
  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="topmenubutton" id="menubutton">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="topmenusearch">
    <a href="#searchmodal" data-toggle="modal"><i class="fa fa-search"></i></a>
  </div>
  <div class="topmenuicon">
    <a href=""><img src="" class="img-responsive" alt=""></a>
  </div>
</header>

<nav id="menuhidden" class="menuhidden">

  <ul>
    <a href="">
      <li><i class="fa fa-home"></i><span>course01</span></li>
    </a>
    <a href="">
      <li><i class="fa fa-user"></i><span>course02</span></li>
    </a>
    <a href="">
      <li><i class="fa fa-phone"></i><span>course03</span></li>
    </a>
    <a href="">
      <li><i class="fa fa-home"></i><span>course04</span></li>
    </a>
  </ul>

</nav>

Answer 1

我发现我自己：

HTML代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="topmenubutton" id="menubutton">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="topmenusearch">
    <a href="#searchmodal" data-toggle="modal"><i class="fa fa-search"></i></a>
  </div>
  <div class="topmenuicon">
    <a href=""><img src="" class="img-responsive" alt=""></a>
  </div>
</header>

<nav id="menuhidden" class="menuhidden">

  <ul>
    <a href="">
      <li><i class="fa fa-home"></i><span>course01</span></li>
    </a>
    <a href="">
      <li><i class="fa fa-user"></i><span>course02</span></li>
    </a>
    <a href="">
      <li><i class="fa fa-phone"></i><span>course03</span></li>
    </a>
    <a href="">
      <li><i class="fa fa-home"></i><span>course04</span></li>
    </a>
  </ul>

</nav>  
<div id="mymenu_overlay" class="mymenu_overlay"></div>

JQuery代码：

jQuery(document).ready(function($) {

        $('#menubutton').click(function(e){
            e.stopPropagation();
            $('#menuhidden').toggleClass('menushown');
            $('#mymenu_overlay').toggleClass('mymenu_overlay_active');
        });
        $('#menuhidden').click(function(e){
            e.stopPropagation();
        });
        $('body,html').click(function(e){
            $('#menuhidden').removeClass('menushown');
            $('#mymenu_overlay').removeClass('mymenu_overlay_active');
        });


    });

CSS代码：

.mymenu_overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    left: 0;
    top: 0;
    z-index: 99999;
    cursor: pointer;
    opacity: 0; 
    visibility: hidden; 
    transition: ease-in-out .3s;
    -ms-transition: ease-in-out .3s;
    -webkit-transition: ease-in-out .3s;
    -o-transition: ease-in-out .3s;
    -moz-transition: ease-in-out .3s;
}
.mymenu_overlay_active {
    opacity: 1;
    visibility: visible;
}

如何通过 css 为我的菜单添加深色背景？

how to add dark background to my menu by css?

jquery

slidetoggle

twitter-bootstrap

bootstrap-modal

HTML代码：

JQuery代码：

CSS代码：