how to add dark background to my menu by css?

Question

I am using WordPress for my website and I created a main menu by jQuery myself that will be slideleft when the user click on the menu button. but there is a big issue: when the user click out of menu erea to close the menu, that element (out of menu, like a button) will be clicked too. I need something like Bootstrap Modal that when it will be appear, around the modal will be dark and by clicking out of modal, the modal will be closed and nothing will be clicked too. do you understand, what I mean?

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

I found out that my self:

HTML Code:

<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 Code:

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 Code:

.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;
}