How to make a fullscreen menu?

<nav class="site-navigation">
 <div class="menu-menu-container">
 <ul id="primary-menu" class="menu">
 the <li><a href="">home</a></li>
 the <li><a href="">about me</a></li>
 the <li><a href="">work</a></li>
 the <li><a href="">contact</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 fullscreen menu? Which will overlap the content.
Something like this:
5e988746b34bb866967797.png
April 19th 20 at 12:22
2 answers
April 19th 20 at 12:24
Solution
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;
}
April 19th 20 at 12:26
Solution
The simplest example of five minutes:

Find more questions by tags HTMLJavaScriptCSS