今天在改一个响应式网站,兼容手机时需要写一个下拉菜单。
其实用纯 CSS 就能实现,利用 checkbox
的 checked
属性,设置菜单的显示隐藏。
HTML:
<nav>
<label for="menu-check" id="menu-toggle">菜单</label>
<input id="menu-check" type="checkbox">
<ul>
<li>菜单栏一</li>
<li>菜单栏二</li>
<li>菜单栏三</li>
<li>菜单栏四</li>
</ul>
</nav>
CSS:
#menu-toggle{
position: absolute;
top: 10px;
right: 20px;
}
#menu-check ~ ul{
display: none;
}
#menu-check:checked ~ ul{
display: block;
}
ul{
list-style: none;
}
li{
line-height: 36px;
}
label
绑定 input
,通过判断 checkbox
的 checked
属性,给他的兄弟元素设置 display
属性。
然后将 input
标签隐藏就可以了:
#menu-check{
display: none;
}
声明:本文由w3h5原创,转载请注明出处:《利用纯CSS实现手机下拉菜单效果》 https://cloud.tencent.com/developer/article/1538009