共计 2233 个字符,预计需要花费 6 分钟才能阅读完成。
不多废话,先上预览
https://codepen.io/Ritr/pen/W…
这一次还是使用 <input type="checkbox">
的选中与否来实现展开、收起二级菜单的。
第一步:初始化
默认二级菜单的 li 高度为 0
选择一级菜单时,将二级菜单高度设置为 20px
这样设置是为了方便我们以后添加动画效果
html
<ul class="menu">
<li class="main-menu">
<label for="ck1">
<span> 水果 </span>
</label>
<input id="ck1" type="checkbox">
<ul class="sub-menu-container">
<li class="sub-menu"> 橘子 </li>
<li class="sub-menu"> 香蕉 </li>
<li class="sub-menu"> 苹果 </li>
</ul>
</li>
<li class="main-menu">
<label for="ck2">
<span> 水果 </span>
</label>
<input id="ck2" type="checkbox" checked>
<ul class="sub-menu-container">
<li class="sub-menu checked"> 橘子 </li>
<li class="sub-menu checked"> 香蕉 </li>
<li class="sub-menu checked"> 苹果 </li>
</ul>
</li>
</ul>
css
/* 初始化 */
*{
margin:0;
padding:0
}
.container{
width:500px;
margin:0 auto;
text-align:center;
}
.menu{
width:200px;
display:inline-block;
}
li{
list-style:none;
cursor:pointer;
text-align:left;
text-indent:5px;
}
.main-menu{
background:#0099CC;
margin:1px 0;
}
.sub-menu{
background:#00CCFF;
margin:1px 0;
overflow:hidden;
height:0;
}
.sub-menu.checked{height:20px;}
效果图
第二步:选中 checkbox 时展开二级菜单,取消选择时收起二级菜单
划重点 – 注意 label 和 input 之间的位置
html
<ul class="menu">
<li class="main-menu">
<label for="ck3">
<span> 水果 </span>
</label>
<input id="ck3" class="ck" type="checkbox">
<ul class="sub-menu-container">
<li class="sub-menu"> 橘子 </li>
<li class="sub-menu"> 香蕉 </li>
<li class="sub-menu"> 苹果 </li>
</ul>
</li>
<li class="main-menu">
<label for="ck4">
<span> 水果 </span>
</label>
<input id="ck4" class="ck" type="checkbox" checked>
<ul class="sub-menu-container">
<li class="sub-menu"> 橘子 </li>
<li class="sub-menu"> 香蕉 </li>
<li class="sub-menu"> 苹果 </li>
</ul>
</li>
</ul>
css
/* 第二步 */
.ck:checked + .sub-menu-container .sub-menu{height:20px;}
效果图
看起来跟第一步没什么变化
第三步优化
将 label 设置成和一级菜单同样大小,隐藏 checkbox,添加动画
html
<ul class="menu">
<li class="main-menu">
<label for="ck5" class="menu-label">
<span> 水果 </span>
</label>
<input id="ck5" class="ck-finished" type="checkbox">
<ul class="sub-menu-container">
<li class="sub-menu-finished"> 橘子 </li>
<li class="sub-menu-finished"> 香蕉 </li>
<li class="sub-menu-finished"> 苹果 </li>
</ul>
</li>
</ul>
css
.menu-label{
display:inline-block;
width:100%;
cursor:pointer;
}
/* 隐藏 checkbox */
.ck-finished{display:none;}
.ck-finished:checked + .sub-menu-container .sub-menu-finished{height:20px;}
.sub-menu-finished{
background:#00CCFF;
margin:1px 0;
overflow:hidden;
height:0;
transition:all 0.4s;/* 添加动画 */
}
效果图
哈哈,变化不大。还是需要你点击预览一下的。
另外怎么上次 gif 图?大佬告诉我一下吧。
正文完