怎么用纯css实现点击出现下拉框，抽屉效果那种

html-css015

怎么用纯css实现点击出现下拉框，抽屉效果那种,第1张

/* CSS部分 */

ul { list-style:none margin:0 padding:0 text-align:center background:#F03 color:#FFF -webkit-transform:scaleY(0) -webkit-transform-origin:0 0 }

li { padding:0 margin:0 }

div { width:200px }

div:hover ul { -webkit-animation:ulShow 0.4s -webkit-animation-fill-mode:forwards -webkit-animation-timing-function: cubic-bezier(0,0.8,0.9,1) }

div div { height:30px line-height:30px text-align:center background-color:#FC0 }

@-webkit-keyframes ulShow {

from { -webkit-transform:scaleY(0) }

to { -webkit-transform:scaleY(1) }

} <!-- HTML部分 -->

<div>

<div>下拉 </div>

<ul>

     <li>第一个</li>

     <li>第二个</li>

     <li>第三个</li>

    </ul>

</div>

本例适用于谷歌浏览器和Safari浏览器，如需兼容Opera须将“-webkit-”更改为”-o-“，火狐改为“-moz-

”，IE系列比较复杂在此不予举例详情请查询W3C。

你是要横着的导航条式的，还是竖着的目录式的呢？

$(".leftsc>ul>li").hover(function(){

$(this).find("ul").show()

},function(){

$(this).find("ul").hide()

})

剩下的就是你的css样式布局了。。你也可以通过加class,设置class的属性display:block；默认子层的ul的disaplay:none可以用hover效果也可以用click来切换class.

自己写最好了，最能满足实际需求又不会有包袱。

这个基本就是写好页面然后用css调整位置就好了应该。

将整个父容器设置为相对定位，然后将左半部分设置为绝对定位，实现点击隐藏/展开，动画可以用jQuery。

是实现浮层的。如果单纯是想实现整体位移应该更简洁，直接把整个html页面写出，然后在点击的时候控制可见的部分就好了。