Блог

как я могу добиться чего-то похожего на боковое меню в Google ? Я пытался много раз, но я не мог создать меню, которое выталкивает основное содержимое

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

/ссылки/

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


.vmenu a:hover{
color:white;}
  

/—————- контейнер————-/
/ ——— чат ——/

 .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{
float:left;
height:700px;
width:40%;
min-width:450px;
background-color:green;
transition:width 1s,margin-right 1s;}
  

jquery

//левый 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"
            });
        }

    });
  

Чего я хочу

Я прошу прощения, если вы находите код слишком длинным, но вот код . То, что я хочу, это что-то вроде меню sidenav Google : когда оно появляется, вся страница перемещается и сжимается, когда она сворачивается с помощью sidenav.

src1

src2

Попробуйте этот простой пример. Я часто его использую.

 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()">amp;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()">amp;#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>