使用javascript

时间：2019-06-15 00:13:23

标签： javascript css

尝试实施此code。这是我的html.close按钮应该隐藏整个导航，而不是只失去其width属性。我想拥有包括list和avatar在内的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;
}

1 个答案:

答案 0 :(得分：0)

如果要滑动效果，则需要使用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>

相关问题
最新问题