创建可折叠的菜单

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为。暗度从位置：绝对;至职位：固定;

它应该解决您的问题。

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>