jquery - 如何创建侧导航

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

j查询

//左侧导航

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