使用侧边栏移动内容

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

您可以为内容的左侧或右侧属性设置动画。如果侧边栏来自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});

});

另外，请在JSFiddle中包含jQuery。

Answer 2

尝试这样的事情

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;