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

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

    });

我想要什么

如果您发现代码太长，我会发出aplogize，但这是代码。我想要的是像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>

如何创建sidenav

PHP / HTML ##

CSS

jquery的

我想要什么

1 个答案: