0高度导航栏仍然可见吗？
0高度导航栏仍然可见吗？
提问于 2019-03-27 09:02:16
我正在设计一个投资组合网站，并希望有我的工作滑动到屏幕上，当你点击投资组合，同样的方式导航栏将滑动时，你点击一个菜单图标。我的代码适用于左侧和右侧的导航栏，但对于底部，即使高度为0，它仍然显示块
不幸的是，使用display:none并使用jquery将其更改为display:block会移除滑动到屏幕上的平滑动画。
html
<div id="portfolionav" class="portfolionav">
<a href="javascript:void(0)" class="closebtn"
onclick="closeNav2()">☛</a>
<a href="#">testing</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id=bottom>
<h1 onclick="openNav2()">PORTFOLIO</h1>
</div>css
.portfolionav {
height: 0;
width: 100%;
position: fixed;
z-index: 3;
bottom: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
display: block;
}
.portfolionav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.portfolionav a:hover {
color: #f1f1f1;
}
.portfolionav .closebtn {
position: absolute;
bottom: 25px;
right: 75px;
font-size: 36px;
writing-mode: vertical-rl;
}javascript
function openNav2() {
document.getElementById("portfolionav").style.height = "100vh";
}
function closeNav2() {
document.getElementById("portfolionav").style.height = "0";
}回答 2
Stack Overflow用户
发布于 2019-03-27 09:09:36
使用display: none代替height。
Stack Overflow用户
发布于 2019-03-27 11:56:05
您可以组合使用height和paddingTop来显示和隐藏导航，因为在设置height:0px;时会对导航进行填充
function openNav2() {
debugger;
document.getElementById("portfolionav").style.height = "100vh";
document.getElementById("portfolionav").style.paddingTop = "60px";
}
function closeNav2() {
document.getElementById("portfolionav").style.height = "0";
document.getElementById("portfolionav").style.paddingTop = "0";
} .portfolionav {
height: 0;
width: 100%;
position: fixed;
z-index: 3;
bottom: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 0px;
display: block;
}
.portfolionav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.portfolionav a:hover {
color: #f1f1f1;
}
.portfolionav .closebtn {
position: absolute;
bottom: 25px;
right: 75px;
font-size: 36px;
writing-mode: vertical-rl;
} <div id="portfolionav" class="portfolionav">
<a href="javascript:void(0)" class="closebtn"
onclick="closeNav2()">☛</a>
<a href="#">testing</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id=bottom>
<h1 onclick="openNav2()">PORTFOLIO</h1>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55368311
复制相关文章
相似问题