我想有一个侧面板中的导航菜单,可以切换到与动画汉堡菜单查看.我想创建这个只与css,没有任何JS.
:checked
伪类似乎是可行的,但我不能让它工作.到目前为止,我掌握的代码如下:
.site-navigation {
z-index: 99;
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
width: 40%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
}
.toggle-btn {
display: block;
position: fixed;
z-index: 10;
right: 10px;
top: 10px;
cursor: pointer;
}
.toggle-btn .bar {
width: 30px;
height: 2px;
margin: 7px auto;
background-color: #fff;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}
.toggle-btn .bar:nth-child(2) {
width: 28px;
}
#toggle {
display: none;
}
#toggle:checked~.site-navigation {
display: block;
opacity: 1;
visibility: visible;
}
#toggle:checked~nav ul {
top: 70px;
}
#toggle:checked~nav ul li {
transform: translateY(0px);
opacity: 1;
}
#toggle:checked+label.toggle-btn .bar {
background-color: #efefef;
}
#toggle:checked+label.toggle-btn .bar:nth-child(2) {
opacity: 0;
}
#toggle:checked+label.toggle-btn .bar:nth-child(1) {
transform: translateY(10px) rotate(45deg);
}
#toggle:checked+label.toggle-btn .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
<header id="masthead" class="site-header" role="banner">
<div class="container">
<div id="brand">
<h1 class="site-title"><a href="#">Nice site</a></h1>
</div>
<div id="menu">
<input type="checkbox" id="toggle">
<label class="toggle-btn toggle-btn__cross" for="toggle">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</label>
</div>
<div class="clear"></div>
</div>
<!--/container -->
<!-- .site-navigation .main-navigation -->
<nav role="navigation" id="navigation" class="site-navigation main-navigation">
<span class="menuLabel">menu</span>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
任何帮助和/或建议都将不胜感激!