boční menu se zavíráním na overlay

by Petr Haluza

HTML

<main>
<div class="test">
		<div class="t-top">Nahoře</div>
		<div class="t-right">Vpravo </div>
    <div class="t-left">Vlevo </div>
    <div class="t-bottom">Dole</div>
</div>
	
	<nav class="top">
		<ul>
			<li><a href="#">Ahoj</a></li>
			<li><a href="#">Nazdar</a></li>
		</ul>
    <div class="t-top"> zavřít </div>
    <div class="t-top closer"> zavírák </div>
	</nav>

	<nav class="right">
		<ul>
			<li><a href="#">Ahoj</a></li>
			<li><a href="#">Nazdar</a></li>
		</ul>
    	<div class="t-right">zavřít </div>
    <div class="t-right closer"> zavírák </div>
	</nav>
  
  	<nav class="left">
		<ul>
			<li><a href="#">Ahoj</a></li>
			<li><a href="#">Nazdar</a></li>
		</ul>
    	<div class="t-left">zavřít </div>
    <div class="t-left closer"> zavírák </div>
	</nav>
  
  	<nav class="bottom">
		<ul>
			<li><a href="#">Ahoj</a></li>
			<li><a href="#">Nazdar</a></li>
		</ul>
    	<div class="t-bottom"> zavřít </div>
    <div class="t-bottom closer"> zavírák </div>
	</nav>
  
</main>

CSS

body {     min-height: 100vh;} 
main {    min-height: 100vh; position:relative; left:0; right:0; top:0; bottom: 0; border:5px solid blue}
.active .closer {    min-height: 100vh; min-width: 100vw;position:absolute; background:rgba(100,100,100,.2); z-index: -1; left:-100vw; right:-100vw; top:-100vh; bottom: -100vh}

nav {
	position: fixed;
	background-color: #aaa;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
  z-index:100
}
.test {display:flex; gap: 1em; padding:5em}


nav.left,
nav.right {	height: 100%;	width: 250px;}
nav.left {	top: 0;	left: -250px;}
nav.left.active {	left: 0;}
nav.right {	top: 0;	right: -250px;}
nav.right.active {	right: 0;}

nav.top,
nav.bottom {	height: 100px;	width: 100%;}
nav.top {	top: -100px;	left: 0px;}
nav.top.active {	top: 0;}
nav.bottom {	bottom: -100px;	left: 0;}
nav.bottom.active {	bottom: 0;}

JavaScript

$('.t-top').click(function(){
  $('.top').toggleClass('active');
});
$('.t-left').click(function(){
  $('.left').toggleClass('active');
});
$('.t-right').click(function(){
  $('.right').toggleClass('active');
});
$('.t-bottom').click(function(){
  $('.bottom').toggleClass('active');
});