Maison > interface Web > tutoriel HTML > css自定义下拉菜单,通过伪类控制展开隐藏_html/css_WEB-ITnose

css自定义下拉菜单,通过伪类控制展开隐藏_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:42:48
original
1896 Les gens l'ont consulté

公司最近要做组件库,一些单选框,复选框,下拉菜单都需要美观自定义,

闲余时间做了一个(对浏览器要求较高的)下拉菜单的组件。

/*********实现功能 start **************/

通过css伪类:focus实现下拉菜单基本功能

select:

点击菜单(动画过渡)展开,再次点击(动画过渡)收起;

并保证点击页面空白处和选择option同样(动画过渡)收起菜单。

 option:

限制5条内容的高度,超出则滚动条,反之则自适应高度;

/***********实现功能end************/

有兴趣的可以看一下demo连接

 

 demo地址

http://dabblet.com/gist/f6fa50639957db5a7759

 

核心代码用到的是: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%;        background-color: transparent;    }     div.list-cont {        position: absolute;        top: 100%;        left: -1px;        right: -1px;        z-index: -1;        height: 0px;        -webkit-transition-property: height, z-index;        -webkit-transition-duration: .3s;        -webkit-transition-timing-function: ease-in-out;        transition-property: height, z-index;        transition-duration: .3s;        transition-timing-function: ease-in-out;        -webkit-transform-origin: 0 0;        transform-origin: 0 0;        box-sizing: border-box;        overflow: hidden;    }        div[p-type="listview"]>input:focus+div.list-cont {        height: 152px;        z-index: 10;    }
Copier après la connexion

 

 

 

 以交流的心态做好被喷的准备 ^_^。

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal