的效果我想實現的是: 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>