最近要做组件库,一些单选框,复选框,下拉菜单都需要美观自定义,闲余时间做了一个下拉菜单的组件。勉强 实现了无js(:focus)控制其展开隐藏。/* ------------------实现功能 start ------------------------- * ...
最近要做组件库,一些单选框,复选框,下拉菜单都需要美观自定义,
闲余时间做了一个下拉菜单的组件。
勉强 实现了无js(:focus)控制其展开隐藏。
/* ------------------实现功能 start -------------------------
* 通过 css伪类:focus 实现下拉菜单基本功能
* select:
* 点击菜单(动画过渡)展开,再次点击(动画过渡)收起;
* 并保证点击页面空白处和选择option后同样(动画过渡)收起菜单。
* option:
* 限制5条内容的高度,超出则滚动条,反之则自适应高度;
* ------------------实现功能 end ------------------------- /
有兴趣的可以看一下demo连接
demo测试地址
http://dabblet.com/gist/a1d38f295fe82cb772b9
代码预览
https://gist.github.com/iamyangtao
核心代码用到的是:focus
div.masker { position: absolute; z-index: -1; width: 0; height: 0; } div[p-type="listview"]>input:focus+div+div.masker { left: 0; top: 0; z-index: 10; width: 100%; height: 100%; } div.list-cont { position: absolute; top: 100%; left: -1px; right: -1px; z-index: -1; height: 0px; transition-property: height, z-index; transition-duration: .3s; transition-timing-function: ease-in-out; transform-origin: 0 0; overflow: hidden; } div[p-type="listview"]>input:focus+div.list-cont { height: 152px; z-index: 10; }
原标题:纯css自定义下拉菜单,无js(:focus)控制展开隐藏
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。