Slide sidebar into view on mouse click - html

Question

I'm trying to create my own toggleable sidebar. I've done this snippet (press the brown color in screen to toggle):
I'd like that the background had the full width of the screen so when i hit on the brown part, the background is brown,not white.
$(document).ready(function() {
$("#rest-of-the-page").click(
function() {
$("#sidebar").toggleClass("hidden");
}
);
});
html,
body {
height: 100%;
margin: 0;
}
.container {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100%;
}
#sidebar {
position: absolute;
height: 100%;
width: 15%;
background-color: rgba(27, 26, 26, .8);
transition: all .2s linear 0s;
}
.hidden {
margin-left: -30%;
transition: all .2s linear 0s;
}
#logo-container {
min-height: 150px;
height: 30%;
width: 100%;
border-bottom: 3px solid #1A1A1A;
}
#logo {
width: 100%;
height: 100%;
background: url(Images/logo.png) no-repeat center center;
background-size: 75% auto;
}
.menu-options-container {
height: 50%;
width: 100%;
}
#menu-options-ul {
width: 100%;
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
height: 70%;
}
#menu-options-ul li {
width: 100%;
border-top: 2px solid #373737;
border-bottom: 2px solid #1A1A1A;
height: 3em;
margin-top: 0;
color: #999;
display: table;
}
#menu-options-ul li:hover {
background: rgba(255, 255, 255, 0.2);
}
#menu-options-ul li p {
vertical-align: middle;
display: table-cell;
width: 100%;
}
#menu-options-ul li p:hover {
color: #fff;
}
#rest-of-the-page {
position: absolute;
top: 0;
left: 15%;
width: 85%;
height: 100%;
transition: all .2s linear 0s;
cursor: pointer;
background-color: antiquewhite
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div id="sidebar">
<div id="logo-container">
<div id="logo"></div>
</div>
<div class="menu-options-container">
<ul id="menu-options-ul">
<li>
<p>Hola</p>
</li>
<li>
<p>Adios</p>
</li>
<li>
<p>Buenas</p>
</li>
</ul>
</div>
</div>
<div id="rest-of-the-page"></div>
</div>

Answer 1

just add a class with left:0 name it "fullpage"
make the width 100% for #rest-of-the-page
#rest-of-the-page{
position:absolute;
top:0;
width:100%;
left:15%;
height:100%;
transition: all .2s linear 0s;
cursor:pointer;
background-color:antiquewhite
}
#rest-of-the-page.fullpage{
left:0;
}
UPDATE : Another thing make the margin-left : -15% and not -30% because the width of the sidebar is only 15%
.hidden{
margin-left: -15%;
transition: all .2s linear 0s; //you don't need this
}
add overflow hidden to body
html, body {
height: 100%;
margin:0;
overflow-x:hidden;
}
toggleClass fullpage for #rest-of-the-page
https://jsfiddle.net/yggt4s83/2/

Answer 2

You can add the background color of the #rest-of-the-page element to your body:
$(document).ready(function() {
$("#rest-of-the-page").click(
function() {
$("#sidebar").toggleClass("hidden");
}
);
});
html,
body {
height: 100%;
margin: 0;
background-color: antiquewhite
}
.container {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100%;
}
#sidebar {
position: absolute;
height: 100%;
width: 15%;
background-color: rgba(27, 26, 26, .8);
transition: all .2s linear 0s;
}
.hidden {
margin-left: -30%;
transition: all .2s linear 0s;
}
#logo-container {
min-height: 150px;
height: 30%;
width: 100%;
border-bottom: 3px solid #1A1A1A;
}
#logo {
width: 100%;
height: 100%;
background: url(Images/logo.png) no-repeat center center;
background-size: 75% auto;
}
.menu-options-container {
height: 50%;
width: 100%;
}
#menu-options-ul {
width: 100%;
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
height: 70%;
}
#menu-options-ul li {
width: 100%;
border-top: 2px solid #373737;
border-bottom: 2px solid #1A1A1A;
height: 3em;
margin-top: 0;
color: #999;
display: table;
}
#menu-options-ul li:hover {
background: rgba(255, 255, 255, 0.2);
}
#menu-options-ul li p {
vertical-align: middle;
display: table-cell;
width: 100%;
}
#menu-options-ul li p:hover {
color: #fff;
}
#rest-of-the-page {
position: absolute;
top: 0;
left: 15%;
width: 85%;
height: 100%;
transition: all .2s linear 0s;
cursor: pointer;
background-color: antiquewhite
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div id="sidebar">
<div id="logo-container">
<div id="logo"></div>
</div>
<div class="menu-options-container">
<ul id="menu-options-ul">
<li>
<p>Hola</p>
</li>
<li>
<p>Adios</p>
</li>
<li>
<p>Buenas</p>
</li>
</ul>
</div>
</div>
<div id="rest-of-the-page"></div>
</div>

Answer 3

Why don't you add or remove a class on your #Rest-of-page when you toggle your menu ? Like that, your content will always stick to right side of the page if you have some. No tricky things using absolute position etc involved.
Just like this, ( exemple here )
HTML :
<div class="container">
<div id="sidebar">
<div id="logo-container">
<div id= "logo"></div>
</div>
<div class="menu-options-container">
<ul id="menu-options-ul">
<li><p>Hola</p></li>
<li><p>Adios</p></li>
<li><p>Buenas</p></li>
</ul>
</div>
</div>
<div id="rest-of-the-page" class="page--sided"><p>Hello</p></div>
</div>
CSS :
html, body {
height: 100%;
margin:0;
}
.container{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100%;
}
#sidebar {
position:absolute;
height: 100%;
width: 15%;
background-color: rgba(27, 26, 26, .8);
transition: all .2s linear 0s;
}
.hidden{
margin-left: -30%;
transition: all .2s linear 0s;
}
#logo-container {
min-height: 150px;
height: 30%;
width: 100%;
border-bottom: 3px solid #1A1A1A;
}
#logo {
width: 100%;
height: 100%;
background:url(Images/logo.png) no-repeat center center;
background-size: 75% auto;
}
.menu-options-container {
height: 50%;
width: 100%;
}
#menu-options-ul{
width: 100%;
list-style-type: none;
padding:0;
margin:0;
text-align: center;
height:70%;
}
#menu-options-ul li{
width: 100%;
border-top: 2px solid #373737;
border-bottom: 2px solid #1A1A1A;
height:3em;
margin-top:0;
color: #999;
display: table;
}
#menu-options-ul li:hover{
background: rgba(255,255,255,0.2);
}
#menu-options-ul li p{
vertical-align: middle;
display: table-cell;
width: 100%;
}
#menu-options-ul li p:hover{
color: #fff;
}
#rest-of-the-page{
height:100%;
transition: all .2s linear 0s;
cursor:pointer;
background-color:antiquewhite
}
.page--sided{
position:absolute;
top:0;
left:15%;
width: 85%;
}
.page--full{
width:100%;
}
JS :
$(document).ready(function () {
$("#rest-of-the-page").click(
function () {
$("#sidebar").toggleClass("hidden");
if ($("#rest-of-the-page").hasClass("page--sided")){
$("#rest-of-the-page").removeClass("page--sided")
$("#rest-of-the-page").addClass("page--full");
}else{
$("#rest-of-the-page").addClass("page--sided")
$("#rest-of-the-page").removeClass("page--full");
}
}
);
});

Answer 4

var a = true;
function show(sidebar){
if(a==true){
sidebar.style.left = "0px";
sidebar.style.transition = "left 0.6s linear";
a=false;
}
else{
sidebar.style.left = "-200px";
sidebar.style.transition = "left 0.6s linear";
a=true;
}
}
body{
margin: 0px;
padding:0px;
font-family: helvetica;
}
#sidebar{
width: 200px;
height: 100%;
background: #151718;
top:0px;
left:-200px;
position: absolute;
}
#sidebar ul{
margin-top: 10px;
padding: 0px;
}
#sidebar ul li{
list-style: none;
}
#sidebar ul li a{
color:white;
padding:10px;
width: 180px;
margin-bottom: 4px;
display: block;
border-bottom: 1px solid black;
text-decoration:none;
}
#btn{
margin: 20px;
padding:20px;
right: -90px;
position: absolute;
}
#btn span{
background: black;
width: 25px;
height:5px;
margin-bottom: 5px;
display: block;
border-radius:17px;
}
<div id="sidebar">
<div id="btn" onclick="show(sidebar)">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>Facebook</li>
<li>Vk</li>
<li>google</li>
<li>ymail</li>
</ul>
</div>
**Html left Sidebar using CSS and Javascript **