Sidebar переключены содержание запивая

Question

ниже мой код:

HTML:

<div id="wrapper" style="background-color:red"> 
<div id="sidebar-wrapper" style="background-color:yellow">sidebar 
    <div id="result"></div> 
</div> 
<div id="header" class="container-fluid"> 
    <div class="navbar"> 
     <a href="#menu-toggle" id="menu-toggle" >Press</a>  
     <div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span></div> 
    </div> 
</div> 

CSS:

#wrapper { 
    width: 100vw; 
    padding-left: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
#wrapper.toggled { 
    padding-left: 250px; 
} 
#sidebar-wrapper { 
    z-index: 1000; 
    position: fixed; 
    left: 250px; 
    width: 0; 
    height: 100%; 
    margin-left: -250px; 
    overflow-y:auto; 
    background: #5F657C; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
    box-shadow: inset -10px 0px 10px -7px grey; 
} 
#wrapper.toggled #sidebar-wrapper { 
    width: 250px; 
} 

JS:

$("#menu-toggle").click(function(e) { 
e.preventDefault(); 
$("#wrapper").toggleClass("toggled"); 
}); 

jsfiddle ниже: JSFIDDLE

Моя проблема заключается в левой стороне желтый DIV, содержимое внутри будет своего рода сжать вместе, когда боковая панель слайдов слева.

Я хочу сделать это просто спрятать снизу и не хочу, чтобы содержимое было сжато. У вас есть идеи?

Answer 1

Вы можете сделать это следующим образом:

$("#menu-toggle").click(function(e) { 
 
    e.preventDefault(); 
 
    $("#wrapper").toggleClass("toggled"); 
 
});

  #wrapper { 
 
      padding-left: 0; 
 
      -webkit-transition: all 0.5s ease; 
 
      -moz-transition: all 0.5s ease; 
 
      -o-transition: all 0.5s ease; 
 
      transition: all 0.5s ease; 
 
      } 
 
      #wrapper.toggled { 
 
      padding-left: 250px; 
 
      } 
 
      #sidebar-wrapper { 
 
      z-index: 1000; 
 
      position: fixed; 
 
      left: -250px; 
 
      width: 250px; 
 
      height: 100%; 
 
      overflow-y: auto; 
 
      background: #050545; 
 
      -webkit-transition: all 0.5s ease; 
 
      -moz-transition: all 0.5s ease; 
 
      -o-transition: all 0.5s ease; 
 
      transition: all 0.5s ease; 
 
      box-shadow: inset -10px 0px 10px -7px grey; 
 
      } 
 
      #wrapper.toggled #sidebar-wrapper { 
 
      left: 0; 
 
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="wrapper" style="background-color:red"> 
 
    <div id="sidebar-wrapper" style="background-color:yellow">sidebar content show here 
 
    <div id="result"></div> 
 
    </div> 
 
    <div id="header" class="container-fluid"> 
 
    <div class="navbar"> 
 
     <a href="#menu-toggle" id="menu-toggle">Press</a> 
 
     <div>This is a serious health setback for me personally, but one of CN's core strengths is that we have a very experienced and tightly-knit senior <span id="counterId"></span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Ширина устанавливается по умолчанию в 250px. В моем фрагменте я играю со смещением left, чтобы скрыть/показать боковую панель. Изучите мой код, и вы увидите, как он работает.