How to create a sidenav

Question

how can I achieve something that looks like the side menu in Google+ ? I tried many times, but I couldn't create a menu that pushes the main content

PHP/HTML ##

<div id="user" class="user">
<div class="blanc">
<img src="<?php 
foreach($datas as $data ){
echo ("avatar/".$data['photo_profil']);}
?>"/>
<div class="welc"><?php 
foreach($datas as $data ){
echo $data['nomcomplet'];} ?> 
</div>
</div>
<div class="vmenu" id="vmenu"> // this a menu that shows when I press the arrow (not important)
    <ul>
    <div class="cntr">
    <li>Mon profil</li>
    <div class="ligne"></div><br>
    <li>Créer un groupe</li>
    <li>Créer une team</li>
    <li>Créer une page publicitaire</a></li>
    <div class="ligne"></div><br>
    <li>Paramètres</li>
    <li>Se déconnecter</li>
    </div>
    </ul>
</div>
<div class="plus_menu" id="plus_menu" >//this is a the sidenav that shows when I press the Menu button in ths right
<div class="icon" id="icon"></div>
</div>
<div class="option" id="option">


</div>
</div>

CSS

.user{
position:absolute;
right:100px;
height:46px;
min-width:180px;
font-size:14px;
font-family:grbold;
display:block;
/*align-items:center;*/
color:white;
cursor:pointer;}


.blanc{
padding-left:4px;
position:absolute;
height:46px;
width:180px;
display:flex;
align-items:center;
transition: background-color .7s;}
.blanc:hover{
background-color:#104956;/*#036f6e;*/
border-radius:2px;}
.blanc:hover{
background-color:#104956;/*#036f6e;*/
border-radius:2px;}

.welc{
position:absolute;
left:47px;
text-transform: capitalize;
padding-top:2px;}
.vmenu{
font-family:grbook;
color:black;
position:absolute;
top:46px;
width:300px;
height:auto;
background-color:white;
margin-left:-80px;
display:flex;
justify-content:center;
padding-top:5px;
box-shadow:2px 10px 5px rgba(0,0,0, .35);
-webkit-box-shadow:2px 5px 5px rgba(0,0,0, .35);
z-index:99999999;}


.vmenu ul{
width:100%;}

.center{
display:block;}


.vmenu li{
list-style:none;
padding-top:8px;
padding-bottom:8px;
width:228px;
padding-left:40px;
padding-right:32px;
transition:background-color .1s}

.vmenu li:hover{
background-color:#29aecc;
color:white;}

.vmenu .ligne{
margin-top:6px;

left:3%;
position:absolute;
width:94%;
height:1px;
background-color:#d0e1e1;}


.plus_menu{
display:flex;
justify-content:center;
align-items:center;
margin-left:8px;
position:absolute;
height:46px;
width:48px;
right:-100px;
background-color: #2291aa;
z-index:5;}


.icon{
background-image:url('../icons/menu.png');
background-size:34px 34px;
background-repeat:no-repeat;
height:37px;
width:37px;
margin-left:2px;
transition: all .2s ease-in-out;}

.icon:hover{
transform:scale(1.1);}

.option {
background-image:url('../icons/extrra.png');
background-size:27px 27px;
background-repeat:no-repeat;
background-position:4px 17px;
margin-left:1.8px;
position:absolute;
height:40px;
width:40px;
left:180px;
padding-top:20px;
padding-bottom:8px;
padding-right:6px;
padding-left:6px;}

/links/

.vmenu a{
text-decoration:none;
font-family:grbook;
color:black;}


.vmenu a:hover{
color:white;}

/----------------container-------------/ /--------chat-----/

.page2{
margin:0 auto;
width:1300px;
clear:both;}

.chat{
height:100%;
width:300px;
background-color:gray;
float:left;
top:60px;
position:fixed;}

/container/

.container{
transition:width 1.5s;
min-width:700px;
height:9000px;
margin-top:70px;
margin-left:50px;
margin-right:20px;
background-color:white;
float:left;
border:1px solid rgba(0,0,0, .1);}

/tools/

.tools{
transition:width 1s;
position:fixed;
right:0;
width:0;
height:100%;
background-color:yellow;
display:block;
overflow-x: hidden;}

.tools_container{
margin:70px auto;
width:300px;
background-color:white;}

.tools_container ul{
list-style:none;}

/ads/

.ads{
float:left;
height:700px;
width:40%;
min-width:450px;
background-color:green;
transition:width 1s,margin-right 1s;}

jquery

//left sidenav

    $("#plus_menu").click(function(){
        counter+=1;

        if(counter % 2 == 1){
        $("#tools").css({
            "width":"340px"
            });
        $("#plus_menu").css({
            "background-color":"#104956"
            });
        $("#ads").css({
            "margin-right":"50px",
            "width":"35%"
            });
        $("#container").css({
            "width":"35%"
            });
        }else{
            $("#tools").css({
            "width":"0"
            });
            $("#plus_menu").css({
            "background-color":"#2291aa"
            });
            $("#ads").css({
            "margin-right":"0px"
            });
        }

    });

What I want

I aplogize if you find the code too long , but here is the code . What I want is somthing like Google+ sidenav menu : When it appears the whole page move and shrinks when it collapse with the sidenav .

src1

src2

Answer 1

Try this simple example. I often using it.

---

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}

body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

<!DOCTYPE html>
<html>
  <head><title>Sidenav</title></head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <h2>Sidenav push content</h2>
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; click me</span>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et magna vel purus varius iaculis vel vel nulla. Integer aliquam elit et finibus laoreet. Duis fermentum metus vitae ante pharetra condimentum. In arcu velit, consequat id tempus sit amet, hendrerit elementum ligula. Aliquam erat volutpat. Sed tempor odio in urna condimentum, id venenatis tellus ornare. Sed eget venenatis lorem. Suspendisse potenti.

Ut imperdiet tortor purus, id egestas dui placerat pulvinar. Donec quis augue sed tellus tempor feugiat id quis enim. Nam vitae odio eget arcu commodo fringilla. Morbi elementum ut leo a porttitor. Nulla egestas tincidunt magna vitae ornare. Suspendisse in sagittis ligula, in malesuada elit. In cursus tellus ut accumsan malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis viverra lacus vitae tellus malesuada, at malesuada elit euismod. Phasellus dapibus vitae turpis at scelerisque.

Donec efficitur lorem at leo posuere, at blandit est cursus. Suspendisse interdum ipsum malesuada, varius ex nec, efficitur erat. Suspendisse id porta leo. Quisque aliquam hendrerit ante sit amet fermentum. Nunc ultricies tempus risus ut pulvinar. Maecenas ultricies, est non ultrices pharetra, urna urna laoreet orci, et posuere quam lectus nec tellus. Maecenas pretium ex at leo tincidunt lacinia. Nam interdum metus a neque tincidunt cursus aliquam eget massa. Suspendisse porta neque ut pulvinar commodo. Praesent consectetur condimentum aliquet. Cras lorem mauris, placerat scelerisque ultrices a, fringilla quis mi. Donec bibendum tellus ut facilisis dictum. Pellentesque sollicitudin, sem eu aliquet tempor, leo ex placerat metus, nec mollis arcu nibh at ex. Etiam quis euismod dui, et pellentesque lacus.</p>

</div>
     
</body>
</html>