移動內容與側邊欄

Question

我有我做了一個樣本側邊欄，但不幸的是，它隱藏我的內容

$("img").click(function(){ 
 
    $(".menu-wrap").animate({width: 'toggle'}); 
 
}); 
 

 
$("p.open").click(function(){ 
 
    $(".menu-wrap").animate({width: 'toggle'}); 
 
});

.menu-wrap{ 
 
    height:100%; 
 
    background-color: #1f2223; 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
} 
 

 
@media screen and (max-width:480px){ 
 
    .menu-wrap{ 
 
    width:100%; 
 
    padding-right: 0; 
 
    } 
 
} 
 

 
.menu ul{ 
 
    list-style-type:none; 
 
    padding-right:50px; 
 
    height:100%; 
 
    text-align:center; 
 

 
} 
 

 
.menu ul li{ 
 
    padding-top:70px; 
 
} 
 

 
.menu ul li :first-child{ 
 
    top:50%; 
 
} 
 

 
.menu ul li a{ 
 
    color:white; 
 
    font-weight: bold; 
 
    font-family: Helvetica; 
 
    text-decoration: none; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class='open'>Hello</p> 
 
<div class="menu-wrap"> 
 
    <nav class="menu"> 
 
    <a class="nav-toggle btn"></a> 
 
    <header> 
 
     <img width="100%" src="http://i2.cdn.turner.com/nba/nba/dam/assets/160110221441-chris-paul-new-orleans-pelicans-v-los-angeles-clippers.home-t6.jpeg" alt=""> 
 
    </header> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="about.php">About</a></li> 
 
     <li><a href='categories.php'>Categories</a></li> 
 
     <li><a href="login.php">Login</a></li> 
 
     <li><a href="registration.php">Register</a></li> 
 

 
    </ul> 
 
    </nav> 
 
</div>

JsFiddle

如何使內容移動與邊欄一起側身？

Answer 1

嘗試是這樣的

$('button').click(function() { 
 
    var width = $('.sidebar').width(); 
 
    if(width == 0) { 
 
    $('.sidebar').animate({width:"250"}); 
 
    } else { 
 
    $('.sidebar').animate({width:"0"}); 
 
    } 
 
});

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.content { 
 
    display: flex; 
 
    min-height: 100vh; 
 
} 
 

 
.sidebar { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    width: 0; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    background: white; 
 
    margin: 0; 
 
} 
 

 
button { 
 
    background: black; 
 
    color: white; 
 
    padding: 5px; 
 
    position: fixed; 
 
    top: 50px; 
 
    left: 50px; 
 
} 
 
.main { 
 
    border: 1px solid black; 
 
    flex: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <ul class="sidebar"> 
 
    <li><a href="#">This is link</a></li> 
 
    <li><a href="#">This is link</a></li> 
 
    <li><a href="#">This is link</a></li> 
 
    <li><a href="#">This is link</a></li> 
 
    <li><a href="#">This is link</a></li> 
 
    </ul> 
 
    
 
    <div class="main"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus ex, voluptatum error itaque provident totam ratione, quaerat reprehenderit accusantium omnis veniam voluptatibus fugiat ducimus, eos, consequuntur perferendis fugit adipisci dolores. 
 
    </div> 
 
</div> 
 

 
<button>MENU</button>

Answer 2

您可以爲內容的左側或右側屬性設置動畫。如果側欄從left進來，則動畫爲right至-sidebar-width。

$("img").click(function(){ 
    $(".menu-wrap").animate({width: 'toggle'}); 
    $(".menu-wrap").animate({right: -sidebar-width-here}); 
}); 

$("p.open").click(function(){ 
    $(".menu-wrap").animate({width: 'toggle'}); 
    $(".menu-wrap").animate({right: 0px}); 

}); 

此外，請將jQuery包含在JSFiddle中。