使用javascript顯示和隱藏sidenav

Question

試圖實現此代碼 。 這是我的html.the關閉按鈕應該隱藏整個導航，而不是它只失去其寬度屬性。我想有導航元素包括列表和avatar.is有一種不同的方式來接近這個。為什么切換我的包含nav的寬度不會隱藏包含的元素

                  <nav id="nav">
                        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

                    <div id="avatar" >
                        <img src="nerdy-dog.jpg" alt="in a moment"></img>
                        <p>John Samba</p>
                        <p class="title">Web Developer</p>
                    </div>
                    <div class="brief">
                    <article  >

                            <h7 style="background-color:deepskyblue;padding:0 5px;" >->Brief</h7>
                            <span>
                            <p >Based in <strong>Nairobi,Kenya</strong></p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl
                                consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam...
                                </span>
                        </article>

                    </div>
                    <div id="credits">

                    </div>
                    <ul>
                        <li><a class="active" href="index.html" style="text-decoration-line: underline; padding-top:50px;">All</a>
                        </li>
                        <li><a href="work.html">Projects</a></li>
                        <li><a href="about.html">About me</a></li>
                        <li><a href="link.html">Collaborate</a></li>
                        <li><a href="hire.html">To Hire me</a></li>
                    </ul>
                </nav>

這是javascript

'use strict';
function closeNav() {
    document.getElementById("nav").style.width="0";
}

這是css

*{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    background: url(header.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

}
#wrapper{
    position: relative;
    margin: 0;
    height: 100%;

}
nav{
height: 100%;
    position: absolute;
    left: 100px;
    padding-top: 350px;
    width: 200px;
    display: block;
align-content: center;
}
.closebtn{
    position: fixed;
    top: 60px;
    left: 70px;
    font-size: 36px;
    text-decoration-line: none;
}

#avatar{

    background: deepskyblue;
    opacity: .7;
    position: absolute;
    top: 50px;
    width: 200px;
    height:60px;
    display: block;
   align-content: center;
border-radius: 30px;


}
#avatar img{


    height: 60px;
    width: 60px;
    border-radius: 50%;




   /* border-width: medium;*/
    float: left;

}
#avatar p{
    position: absolute;
   text-align: right;
   right: 18px;
}
#avatar :first-of-type {
 margin: 0;   
color:  white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 500;
font-size: 15px;
kerning: 10px;
top: 10px;

}
#avatar :last-of-type{
    color: white;
    top: 12px;
    font-weight: 800;
    font-size: 16px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
header nav  .brief{
    margin-top: -180px;
    position: relative;
    color:white;
    top: 0;
    text-align: center;
    padding: 0 12px;
    height: 190px;
    opacity: .8;
    font-weight: 600;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
 /*nav .brief span{
    background-color: lightsteelblue;

}
*/

nav ul{
display: inline-block;
padding-top: 80px;
position: absolute;
top: 350px;
}

nav ul li{

    display: block;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    list-style-type: none;
    padding: 10px;
    text-align: center;

}
nav ul li a{
    color:white;
    opacity: .7;
    text-decoration: none;


}
.active{
    background-color: deepskyblue;
    width: 50px;
    color: white;
    padding:10px;
    border-radius: 20px;
}

Answer 1

如果你想要一個滑動效果，那么你需要使用width 。 如果將下面的CSS添加到樣式中，則nav元素將從其初始寬度過渡到寬度為0.在此過程中，由於overflow被隱藏，它將隱藏自身。

nav {
  overflow: hidden;
  transition: 0.2s all;
}

如果那不是您所希望的，請告訴我。

---

演示

 function closeNav() { document.getElementById("nav").style.width = "0"; } 

 * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } body { margin: 0; padding: 0; background: url(header.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } #wrapper { position: relative; margin: 0; height: 100%; } nav { height: 100%; position: absolute; left: 100px; padding-top: 350px; width: 200px; display: block; align-content: center; overflow: hidden; transition: 0.2s all; } .closebtn { position: fixed; top: 60px; left: 70px; font-size: 36px; text-decoration-line: none; } #avatar { background: deepskyblue; opacity: .7; position: absolute; top: 50px; width: 200px; height: 60px; display: block; align-content: center; border-radius: 30px; } #avatar img { height: 60px; width: 60px; border-radius: 50%; /* border-width: medium;*/ float: left; } #avatar p { position: absolute; text-align: right; right: 18px; } #avatar :first-of-type { margin: 0; color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 500; font-size: 15px; kerning: 10px; top: 10px; } #avatar :last-of-type { color: white; top: 12px; font-weight: 800; font-size: 16px; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } header nav .brief { margin-top: -180px; position: relative; color: white; top: 0; text-align: center; padding: 0 12px; height: 190px; opacity: .8; font-weight: 600; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } /*nav .brief span{ background-color: lightsteelblue; } */ nav ul { display: inline-block; padding-top: 80px; position: absolute; top: 350px; } nav ul li { display: block; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; list-style-type: none; padding: 10px; text-align: center; } nav ul li a { color: white; opacity: .7; text-decoration: none; } .active { background-color: deepskyblue; width: 50px; color: white; padding: 10px; border-radius: 20px; } 

 <nav id="nav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div id="avatar"> <img src="nerdy-dog.jpg" alt="in a moment"></img> <p>John Samba</p> <p class="title">Web Developer</p> </div> <div class="brief"> <article> <h7 style="background-color:deepskyblue;padding:0 5px;">->Brief</h7> <span> <p >Based in <strong>Nairobi,Kenya</strong></p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam... </span> </article> </div> <div id="credits"> </div> <ul> <li><a class="active" href="index.html" style="text-decoration-line: underline; padding-top:50px;">All</a> </li> <li><a href="work.html">Projects</a></li> <li><a href="about.html">About me</a></li> <li><a href="link.html">Collaborate</a></li> <li><a href="hire.html">To Hire me</a></li> </ul> </nav>