jednoduch7 js promodalz, menu atd.

by Petr Haluza

HTML

<body class="">

<nav class="sidebar" id="m1">
  <ul><li>nav 1</li><li>nav 2</li><li>nav 3</li><li>nav 4</li></ul>
  <a data-menu="m1" class="menu">hide</a>
</nav>

<nav class="sidebar" id="m2">
  <ul><li>prd 3</li><li>prd 4</li></ul>
  <a data-menu="m2" class="menu">hide</a>
</nav>

<div class="page">

  <div style="text-align:right">
    <a data-menu="m1" class="menu">Show1</a>
    <a data-menu="m2" class="menu">Show2</a>
  </div>

  <p>prd ipsum prd ipsum prd ipsum prd ipsum</p>
  <p>prd ipsum prd ipsum prd ipsum prd ipsum</p>
  
</div><!-- /page -->
</body>

CSS

.sidebar { 
opacity: 1;
background: white;
display: block;
left: 0;
top: 0;
width: 250px;
bottom: 0;
box-shadow: 0 15px 25px 1px rgba(0,0,0,.1);
transform: translate3d(-105%,0,0);
transition: transform .4s ease;
will-change: transform,opacity;
position: fixed;
z-index: 100;
overflow-y: scroll;}
.sidebar.open {
    opacity: 1 !important;
    pointer-events: all !important;
    transition-delay: 0s !important;
    transform: translate3d(0,0,0) !important;
}
body > .page {transition: transform .4s ease;
will-change: transform; min-height: 100%;}
body.open {}
body.open > .page {transform: translate3d(15%,0,0);}
.page {height:100%}

JavaScript

$(document).ready(function(){
    $(".menu").on("click", function(){
        var dataId = $(this).attr("data-menu");
        $("#" + dataId).toggleClass("open");
        if ( $(".sidebar").hasClass('open')) {
    			$("body").addClass('open');
				} 
    		else {
       		$("body").removeClass('open');
 	      } 
        
    })

});