Создания складной Side Menu

Question

эффектом я пытаюсь достичь: https://gesso-theme.myshopify.com/
При нажатия на разборном меню в верхнем левом углу.

Вещи я застрял и пытаюсь добиться являются:

1.) Как сделать меню, кажется, переложить содержимое тела вправо, когда изменения меню в? (Это не так важно, но было бы хорошо знать)
2.) Почему мой теневой div, который скрывает мое содержание тела, не будет иметь полную ширину и высоту браузера?
3.) Я хочу быть в состоянии достичь этого независимо от того, какое содержание у меня есть в теле.
4.) Я хочу достичь этого без плагина или бутстрапа, просто javascript, jquery, css и html, чтобы я мог действительно понять, что происходит.

$(".show-side-menu").click(function(){ 
 
$(".container").toggle(); 
 
$(".darkness").toggle(); 
 
});

*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
html, body{ 
 
    height: 100%; 
 
    \t \t margin: 0; 
 
} 
 
.container{ 
 
height:100%; 
 
width:200px; 
 
background:white; 
 
position:absolute; 
 
top:0; 
 
bottom:0; 
 
display:none; 
 
} 
 
a.show-side-menu{ 
 
    background:blue; 
 
    color:white; 
 
    font-size:20px; 
 
    z-index:10; 
 
    position:absolute; 
 
} 
 
.random-content{ 
 
height:500px; 
 
width:500px; 
 
margin:10px; 
 
background:purple; 
 
} 
 
.darkness{ 
 

 
    background:rgba(136, 114, 114, 0.65); 
 
    position:absolute; 
 
    top:0; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="show-side-menu">Show</a> 
 
<div class="darkness"></div> 
 
<div class="container"> 
 

 
</div> 
 

 
<div class="random-content"> 
 
    
 
</div> 
 

 
<div class="random-content"> 
 
    
 
</div> 
 
<div class="random-content"> 
 
    
 
</div> 
 
<div class="random-content"> 
 
    
 
</div>

Answer 1

1. для смещения тела JQuery

   $('.darkness').toggle(function() { 
   $(".random-content").addClass("moveLeft"); 
   }, function() { 
       $(".random-content").removeClass("moveLeft"); 
   }); 
   

   CSS

   .random-content.moveLeft { 
       transform: translateX(200px); 
   } 
   

2. Чтобы закрыть окно браузера для всего окна css для .darkness от позиция: абсолютная; до позиция: фиксированная;

Он должен решить ваши проблемы.

Answer 2

Используя простейший HTML и CSS это то, что я могу дать вам

$(function() { 
 
\t $(".ui-menu-toggle").click(function() { 
 
    \t $(".ui-menu").toggleClass("open"); 
 
    console.info($(".ui-menu")); 
 
    }); 
 
});

.ui-menu { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    z-index: 1001; 
 
} 
 
.ui-menu > .ui-menu-overlay { 
 
    opacity: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    z-index: 0; 
 
    position: fixed; 
 
    background: #000; 
 
    transition-property: opacity; 
 
    transition-duration: 0.2s; 
 
} 
 
.ui-menu > .ui-menu-container { 
 
    background-color: #fff; 
 
    box-shadow: 0 -1px 24px rgba(0, 0, 0, 0.4); 
 
    height: 100%; 
 
    left: -340px; 
 
    position: absolute; 
 
    width: 320px; 
 
    transition-property: transform; 
 
    transition-duration: 0.3s; 
 
} 
 

 
.ui-menu.open { 
 
    display: block; 
 
} 
 

 
.ui-menu.open > .ui-menu-overlay { 
 
    opacity: 0.3; 
 
} 
 
.ui-menu.open > .ui-menu-container { 
 
    transform: translateX(340px); 
 
} 
 

 
.ui-body { 
 
    background: pink; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    transition-property: transform; 
 
    transition-duration: 0.3s; 
 
} 
 

 
.ui-menu.open > .ui-body { 
 
    transform: translateX(320px); 
 
    z-index: -1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="ui-menu"> 
 
\t <div class="ui-menu-overlay"></div> 
 
\t <div class="ui-menu-container"> 
 
    <a href="#" class="ui-menu-toggle">close menu</a> 
 
\t \t menu content 
 
\t </div> 
 
    <div class="ui-body"> 
 
    <a href="#" class="ui-menu-toggle">open menu</a> 
 
    body content 
 
    </div> 
 
</div>

Answer 3

Вы можете сделать что-то вроде этого: http://codepen.io/kevinkl3/pen/ZQoNxm

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 


<div class="wrapper"> 
    <div class="menu"> 
    <h2 align="center">Menu</h2> 
    </div> 
    <div class="container"> 
     <a href="#" class="show-side-menu">Show</a> 
    <div class="random-content"> 
    </div> 
    <div class="random-content"> 
    </div> 
    <div class="random-content"> 
    </div> 
    <div class="random-content"> 
    </div> 
    <div class="darkness"></div> 
    </div> 

</div> 

CSS:

body{ 
    font-family: sans-serif; 
} 

html, body{ 
    margin: 0px; 
} 

.menu{ 
    height:100%; 
    width:240px; 
    background:white; 
    position:fixed; 
    left: 0px; 
    top:0px; 
    bottom:0px; 
} 
a.show-side-menu{ 
    background:blue; 
    color:white; 
    font-size:20px; 
    z-index:10; 
    position:fixed; 
    top:5px; 
    left:5px; 
    transition: all 0.35s; 
} 

.wrapper.menu-open a.show-side-menu{ 
    left: 245px; 
} 

.random-content{ 
    height:500px; 
    width:500px; 
    margin:10px; 
    background:purple; 
} 
.darkness{ 
    background:rgba(0, 0, 0, 0.8); 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    opacity: 0; 
    transition: all 0.35s; 
    pointer-events:none; 
} 

.wrapper .container{ 
    position:relative; 
    margin-left:0px; 
    transition: all 0.35s; 
    padding-top:20px; 
} 

.wrapper.menu-open .darkness{ 
    opacity: 1; 
} 

.wrapper.menu-open .container{ 
    margin-left:240px; 
} 

.wrapper:not(.menu-open) .menu{ 
    margin-left:-240px; 

} 

.wrapper .menu{ 
    transition: all 0.35s; 
    margin-left:0px; 
    z-index:9999; 
} 

JS:

$(".show-side-menu").click(function(){ 
    var wrapper = $(".wrapper"); 
    wrapper.toggleClass('menu-open'); 
    if(!wrapper.hasClass('menu-open')) 
    $(".show-side-menu").text('show') 
    else 
    $(".show-side-menu").text('hide') 
}); 

Answer 4

Добавить один JS файл в jquery.transit.min.js

Изменить Function

$(document).ready(function() { 
 

 
      $(document).off('click', '.show-side-menu'); 
 
      $(document).on('click', '.show-side-menu', function() { 
 
       $(this).addClass('active'); 
 
       $(this).html('Hide'); 
 
       $(this).transition({ x: '200px' }); 
 
       $(this).removeClass('show-side-menu'); 
 
       $(".container").animate({ left: 0 }); 
 
       $(".darkness").show(); 
 
       $(".random-content").transition({ x: '200px' }); 
 
      }); 
 
      $(document).off('click', '.active'); 
 
      $(document).on('click', '.active', function() { 
 
       $(this).removeClass('active'); 
 
       $(this).html('Show'); 
 
       $(this).transition({ x: '0px' }); 
 
       $(this).addClass('show-side-menu'); 
 
       $(".container").animate({ left: "-=200px" }); 
 
       $(".random-content").transition({ x: '0px' }); 
 
       $(".darkness").hide(); 
 
      }); 
 
     });

* { 
 
      margin: 0; 
 
      padding: 0; 
 
     } 
 

 
     html, body { 
 
      height: 100%; 
 
      margin: 0; 
 
     } 
 

 
     .container { 
 
      height: 100%; 
 
      width: 200px; 
 
      background: white; 
 
      position: absolute; 
 
      top: 0; 
 
      bottom: 0; 
 
      left: -200px; 
 
z-index:9; 
 
     } 
 

 
     a.show-side-menu, a.active { 
 
      background: blue; 
 
      color: white; 
 
      font-size: 20px; 
 
      z-index: 10; 
 
      position: absolute; 
 
     } 
 

 
     a.active { 
 
      background: red; 
 
     } 
 

 
     .random-content { 
 
      height: 500px; 
 
      width: 500px; 
 
      /*margin: 10px;*/ 
 
      background: purple; 
 
     } 
 

 
     .darkness { 
 
      background: rgba(136, 114, 114, 0.65); 
 
      position: fixed; 
 
      height: 100%; 
 
      top: 0; 
 
      bottom: 0; 
 
      left: 0; 
 
      right: 0; 
 
      display: none; 
 
z-index:5; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script> 
 
<a href="#" class="show-side-menu">Show</a> 
 
    <div class="darkness"></div> 
 
    <div class="container"> 
 

 
    </div> 
 

 
    <div class="random-content"> 
 

 
    </div> 
 

 
    <div class="random-content"> 
 

 
    </div> 
 
    <div class="random-content"> 
 

 
    </div> 
 
    <div class="random-content"> 
 

 
    </div>