列表的展开与收起
大家先开看看这张图:
css实现列表展开与收起.gif
很多人会说,裤子都脱了,你给我看这个?不就是js点击效果么....
NO!!!
checkbox
input标签大家经常用到,form表单用的心累....可一般咱们的input标签中,type字段都是text、submit居多。只有到恶霸条款(已阅读以上协议,并同意...)时,才会使用。
但如果使用checkbox配合label标签的for,即可用css完成列表的展开收起。
上面的图片代码如下:
* {
margin: 0px ;
padding: 0px;
width: 100px;
}
#menu-checkbox{
display: none;
}
#menu-checkbox:checked ~ .tag-list{
display: none;
}
li{
float: left;
margin: 2px;
list-style-type: none;
}
a {
text-decoration: none;
}
主菜单
不积跬步无以至千里,不积小流无以成江海.....