CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Coolguy
Coolguy

Reputation: 2285

Sidebar toggled content squeezed

below is my code:

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

The jsfiddle is below: JSFIDDLE

My problem is for the left side yellow div, the content inside will kinda squeeze together when the sidebar slide to the left.

I want to make it just hide underneath and don't want the content to be squeezed. Do you guys have any idea?

Upvotes: 1

Views: 506

Answers (1)

Starfish
Starfish

Reputation: 3584

You could do it like this:

$("#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>

The width is set default to 250px. In my snippet I'm playing with the offset left to hide/show the sidebar. Study my code and you'll see how it works.

Upvotes: 1

Related Questions