How to make a full screen menu?

Question

css

<nav class="site-navigation">
  <div class="menu-menu-container">
    <ul id="primary-menu" class="menu">
      <li><a href="">домой</a></li>
      <li><a href="">обо мне</a></li>
      <li><a href="">работы</a></li>
      <li><a href="">контакти</a></li>
    </ul>
  </div>			
  <div class="toggle_menu">menu</div>
</nav>

.menu {
    display: none;
}
.menu-active {
    display: block;
}

jQuery('.toggle_menu').click(function(){
    jQuery('.menu').toggleClass('menu-active');
});

How to make a full screen menu? Which will overlap the content.
Something like this:

Answer 1

body{
    margin:0;
}
.menu {
    display: none;
}
.menu-active {
    display: block;
    background:black;
    height:100vh;
    width:100vw;
    position: absolute;
    z-index: 1000;
    margin:0;
    opacity:0.8;
}