gpt4 book ai didi

javascript - 使用javascript显示和隐藏sidenav

转载 作者:行者123 更新时间:2023-11-27 23:49:54 26 4
gpt4 key购买 nike

试图实现这个 code .这是我的 html。关闭按钮应该隐藏整个导航,而不是它只会丢失其宽度属性。我想要导航元素,包括列表和头像。是否有不同的方法来处理这个问题。为什么要切换我包含的导航宽度不隐藏包含的元素

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

最佳答案

如果你想要滑动效果那么你需要使用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>

关于javascript - 使用javascript显示和隐藏sidenav,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56606356/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com