如何创建sidenav

Question

怎样才能实现类似于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{
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{
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

//左塞德纳夫

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

    });

我想要的

如果你发现代码太长，我会说，但这是代码。我想要的是一些类似于Google+ sidenav菜单的东西:当它出现时，整个页面都会移动，当它与sidenav一起折叠时会收缩。

src1

src2

Answer 1

试试这个简单的例子。我经常用它。

​

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>

​