aside na slide panel se zavřením na overlay

by Petr Haluza

HTML

<main>

<div class="test">
    <div class="t-left">Filtrovat školení</div>
</div>
	
  	<nav class="left">
		<ul>
			<li><input type="checkbox"></li>
			<li><input type="checkbox"></li>
		</ul>
    	<div class="t-left">zavřít </div>
    <div class="t-left closer"> zavírák </div>
	</nav>
  
  
</main>

CSS

.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;	transition: .5s;  z-index:100; padding: 2em; height: 100%;	width: 250px;	top: 0;	transform: translatex(-110%);}
nav.active {	transform: translatex(0)}

JavaScript

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