QQ菜单大家都见过,这样有以下的功能:
1.点击我的好友,会展示下拉出具体的好友
2.再点击我的好友,会收缩
3.首次点击具体的某个好友,只有当前这个好友高亮
4.再次点击这个好友时,高亮状态就消失了
还是瞄一眼效果图吧:
最后代码
ul,h2 {padding:0;margin:0;} li{list-style:none;} #list{width:200px;margin:0 auto;border:1px solid #000;} #list{width:200px;} #list h2{width:200px;height:30px;line-height:30px;text-align:center;background:url(img/ico1.gif) no-repeat 20% 50% #6699FF;text-indent:24px;border-bottom:1px dotted #000;} #list h2.active{background:url(img/ico2.gif) no-repeat 20% 50% #FFCC99;} #list ul{width:200px;text-align:center;display:none;} #list ul li{width:200px;height:30px;line-height:30px;} #list ul li.highlight{background:#FF66FF;} 无标题文档
- 我的好友
- 张三1
- 张三2
- 张三3
- 企业好友
- 李四1
- 李四2
- 李四3
- 黑名单
- 王五1
- 王五2
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。



