我找到了一个仅用css编写的响应式简约菜单。当屏幕较小时,会发生魔术:当用户点击“汉堡包”图标时,菜单可以在没有javascript的情况下下拉和回滚。
转换可能归功于提取:
#nav:checked ~ nav {
max-height: 200px; /* This can be anything bigger than your nav height. The transition duration works with this */
}
nav {
float: right;
max-height: 0;
width: 100%;
-webkit-transition: max-height 0.3s;
-moz-transition: max-height 0.3s;
-o-transition: max-height 0.3s;
transition: max-height 0.3s;
}
当用户点击某个项目而不是菜单图标时,是否还可以回滚菜单?
答案 0 :(得分:3)
可能会将这些项目放入<label for="nav">
<强> CODEPEN 强>
<强> HTML 强>:
<input id="nav" type="checkbox">
<label for="nav" class="button"></label>
<nav>
<ul>
<li><a href="#"><label for="nav">One</label></a></li>
<li><a href="#"><label for="nav">Two</label></a></li>
<li><a href="#"><label for="nav">Three</label></a></li>
<li><a href="#"><label for="nav">Four</label></a></li>
</ul>
</nav>
<强> CSS 强>:
header {
overflow: hidden;
background: #222;
}
header a, header label.button {
display: block;
padding: 20px;
color: #fff;
text-decoration: none;
line-height: 20px;
}
header a:hover, header label.button:hover { color: #aaa; }
header label.button {
float: right;
padding: 18px 20px;
cursor: pointer;
}
header label.button:after {
content: "\2261";
font-size: 1.8em;
}
header nav ul li label {
display: block;
cursor: inherit;
}
.logo {
float: left;
font-weight: bold;
font-size: 1.5em;
}
nav {
float: right;
max-height: 0;
width: 100%;
-webkit-transition: max-height 0.3s;
-moz-transition: max-height 0.3s;
-o-transition: max-height 0.3s;
transition: max-height 0.3s;
}
nav ul {
margin: 0;
padding: 0;
padding-bottom: 10px;
}
nav li {
display: block;
text-align: center;
}
nav a {
padding: 10px;
width: 100%;
}
#nav { display: none; }
#nav:checked ~ nav {
max-height: 200px; /* This can be anything bigger than your nav height. The transition duration works with this */
}
@media only screen and (min-width: 700px) {
header label.button { display: none; }
nav {
width: auto;
max-height: none;
}
nav ul {
padding: 0;
padding-right: 10px;
}
nav li {
display: inline-block;
text-align: left;
}
header nav a {
display: inline-block;
padding: 20px 10px;
width: auto;
}
}