我创建了一个带有侧边栏的网页,其中包含指向我网站其他部分的链接。侧边栏是隐藏的(不是真正隐藏的,只是使用 left: -16vw 离开页面),但有一个突出的按钮供访问者看到。我想要的是,当访问者单击按钮时,侧边栏会滑出。这是我的代码的样子:
HMTL:
<div id="sideBar">
<button id="navButton" type="button">>></button>
<nav>
<ul>
<li><a href="#">Stuff</a></li>
<li><a href="#">More Stuff</a></li>
<li><a href="#">Even More Stuff</a></li>
</ul>
</nav>
</div>
CSS:
#sideBar {
display: flex;
flex-direction: row-reverse;
position: fixed;
height: 84vh;
min-width: 18vw;
top: 8vh;
left: -16vw;
animation: slide;
animation-duration: .3s;
animation-timing-function: ease-in;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-play-state: paused;
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(16vw);
}
}
nav {
background-color: gray;
width: 100%;
height: 100%;
}
#navButton {
min-width:2vw;
margin-left: -1px;
background-color: rgb(228, 228, 228);
border: 2px solid rgb(51, 51, 51);
border-radius: 0 50px 50px 0;
font-size: 1.5rem;
font-weight: bold;
opacity: .5;
transition:
opacity .3s,
background-color 0s;
}
#navButton:active {
background-color: white;
}
#navButton:active + #sideBar {
animation-play-state: running;
}
#navButton:hover {
opacity: 1;
cursor: pointer;
}
我确实在网上读到过,这可能需要 JavaScript 才能完成。无论如何,我只能使用 CSS 和 HTML 来做到这一点吗?我还没有学习 JavaScript,我只是想坚持只使用 HTML/CSS。在继续前进之前,我会尽力向这两个人学习尽可能多的知识。预先感谢你们的帮助,我真的很感激。另外,如果您对我的代码有任何改进的建议,请告诉我;我想尽可能多地学习。
当我注释掉“动画播放状态”时,动画就可以工作,所以我知道它可以工作。我也尝试过仅添加“活动”伪类,但这不起作用。我也尝试将其添加到“悬停”,但这也不起作用。
复选框有一个小技巧:
+
或 ~
#sideBar {
display: flex;
flex-direction: row-reverse;
position: fixed;
height: 84vh;
min-width: 18vw;
top: 8vh;
left: -16vw;
animation: slide;
animation-duration: 0.3s;
animation-timing-function: ease-in;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-play-state: paused;
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(16vw);
}
}
nav {
background-color: gray;
width: 100%;
height: 100%;
}
input {
display: none;
}
#navButton {
padding-top: 38vh;
min-width: 2vw;
margin-left: -1px;
background-color: rgb(228, 228, 228);
border: 2px solid rgb(51, 51, 51);
border-radius: 0 50px 50px 0;
font-size: 1.5rem;
font-weight: bold;
opacity: 0.5;
transition: opacity 0.3s, background-color 0s;
}
#navButton:active {
background-color: white;
}
#navButton:active+#sideBar {
animation-play-state: running;
}
#navButton:hover {
opacity: 1;
cursor: pointer;
}
input:checked~#sideBar {
left: 0;
}
<input type="checkbox" id="toggle" />
<div id="sideBar">
<label id="navButton" for="toggle">>></label>
<nav>
<ul>
<li><a href="#">Stuff</a></li>
<li><a href="#">More Stuff</a></li>
<li><a href="#">Even More Stuff</a></li>
</ul>
</nav>
</div>