我正在创建一个可以打开和关闭的侧边导航。问题是导航项的标题在关闭时也会折叠,我想解决这个问题。
像这样
CSS
.sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 999;
top: 0;
left: 0;
background-color: #263238;
overflow-x: hidden;
transition: all 0.3s;
padding-top: 60px;
}
.sideNav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #fff;
display: block;
transition: 0.1s;
}
html
<ul id="sideNav" class="sideNav nav flex-column" style="width: 250px;"><li class="nav-item"><a href="#" class="nav-link>Title here</a></li></ul>
我在打开和关闭时更改导航的宽度。
js
document.getElementById("sideNav").style.width = "250px"
document.getElementById('sideNav').style.width = "0"
最佳答案
诀窍是使用负 margin
等于导航栏宽度。关闭时 margin 为负,打开时 margin 为零。例如:
.sideNav {
margin-left: -250px;
}
打开时
document.getElementById("sideNav").style.marginLeft = "0";
关闭时
document.getElementById("sideNav").style.marginLeft = "-250px";
关于html - 关闭导航栏时,sidenav 上的元素名称也会折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55675550/