Hey there! I understand that this question has been asked before, but my situation is a bit different. Here's the deal: on my website, I have a sidebar that consists of two overlapping divs which are toggled by a button. Currently, the content of the page sits on top because it was easier to work with. My question is, how can I adjust the page content to fit the new window size when the sidebar is open and then revert back when it's closed?
#A,
#B {
position: absolute;
transition: all 800ms;
-webkit-transition: all 800ms;
-moz-transition: all 800ms;
-ms-transition: all 800ms;
-o-transition: all 800ms;
margin-top: 20px;
}
#A {
top: 0px;
width: 14em;
bottom: 0px;
background: #939393;
border: solid #000000 2px;
}
#B {
top: 0px;
left: 14em;
right: 0;
bottom: 0px;
background: #3b3f45;
}
/*Hide the checkbox*/
#toggle {
display: none;
}
.toggle label:hover, .toggle label:active, .toggle input:hover+label, .toggle input:active+label {
border: 1px solid #000000;
}
.toggle label {
position: fixed;
border-radius: 4px;
/*Set the left position to the same as the sidebar */
left: 14em;
margin: 8em 1.5% 5px;
z-index: 2;
transition: all 800ms;
-webkit-transition: all 800ms;
-moz-transition: all 800ms;
-ms-transition: all 800ms;
-o-transition: all 800ms;
background: #FFFFFF;
padding: 4px 6px;
background: #75787c;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
}
/* Initial sidebar state */
#toggle ~ #A {
left: 0;
}
/*move both containers on toggle*/
#toggle:checked ~ #A,
#toggle:checked ~ #B {
left: -14em;
}
/*move label to follow sidebar animation*/
#toggle:checked,
#toggle:checked ~ label {
left: 0;
background: #FFFFFF;
}<div class="toggle">
<div id="A">
</div>
<input id="toggle" type="checkbox" checked>
<label for="toggle">Menu</label>
<div id="B">
</div>
</div>