divcss2014-07-15 01:34:43 8522
html抽屉效果被很多网站都运用了,下面介绍一下怎样实现这个效果,有过渡效果的。
body { font: 13px "微软雅黑", Arial, Helvetica, sans-serif; } #Main { width: 200px; margin: 0 auto; margin-top: 50px; height:500px; } .item { width: 200px; text-align: center; cursor:pointer; } .item>div { height: 0px; overflow: hidden; } .itemTitle { width: 200px; line-height:25px; background-color: #efefef; } .item li { list-style: none; line-height: 30px; } .currentItem>div{ height:160px; } #beian { text-align: center; float: left; width: 100%; margin-top: 50px } #beian a { color: gray; font: 13px "微软雅黑", Arial, Helvetica, sans-serif; }
<div id="Main"> <div class="item currentItem"> <p class="itemTitle">item1</p> <div> <li>item1child1</li> <li>item1child2</li> <li>item1child3</li> <li>item1child4</li> <li>item1child5</li> </div> </div> <div class="item" style="margin-top:-25px;"> <p class="itemTitle">item2</p> <div> <li>item2child1</li> <li>item2child2</li> <li>item2child3</li> <li>item2child4</li> <li>item2child5</li> </div> </div> <div class="item" style="margin-top:-25px;"> <p class="itemTitle">item3</p> <div> <li>item3child1</li> <li>item3child2</li> <li>item3child3</li> <li>item3child4</li> <li>item3child5</li> </div> </div> <div class="item" style="margin-top:-25px;"> <p class="itemTitle">item4</p> <div> <li>item4child1</li> <li>item4child2</li> <li>item4child3</li> <li>item4child4</li> <li>item4child5</li> </div> </div> </div>
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:HTML抽屉效果 HTML抽屉菜单
文章固定链接:https://www.pengyaou.com/legendsz/front/divcss/NTU=.html
上一篇 SQLServer 储存过程
下一篇 javascript监测键盘按键