代码经过精简后的仿QQ折叠菜单代码

更新时间：2010年09月19日 20:35:36 作者：

代码经过精简后的仿QQ折叠菜单，以前发过的，不过这个是经过几轮代码精简后的一个版本，而且在各浏览器下的表现也很不错，兼容性没出问题。

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>SlideView 滑动展示效果</title> </head> <body> <style type="text/css"> .sv3 dl, .sv3 dt, .sv3 dd{ padding:0; margin:0; } .sv3 { width:240px; border:1px solid #BFC7D9; } .sv3 dl { width:240px; height:380px; background:#EDF5FF; overflow:hidden; } .sv3 dt { padding:5px 10px; height:13px; font-size:13px; color:#000; background:#E5ECF9; border-top:1px solid #fff; border-bottom:1px solid #BFC7D9; } .sv3 dl.on dt { background:#3366CC; color:#FFF; font-weight:bold; } .sv3 dd { padding:10px; color:#333; font-size:12px; line-height:1.5em; } .sv3 dd a:link, .sv3 dd a:visited, .sv3 dd a:hover, .sv3 dd a:active { color:#333; display:block; text-align:right;} </style> <div id="idSlideView3" class="sv3"> <dl> <dt>我的好友 </dt> <dd> 张三 </dd> <dd> 王五 </dd> </dl> <dl> <dt> 业务联系 </dt> <dd> 李经理 </dd> </dl> <dl> <dt> 家人 </dt> <dd> 爸爸 </dd> <dd> 妈妈 </dd> </dl> <dl> <dt> 同事 </dt> <dd> 小赵</dd> </dl> <dl> <dt> 讨厌的人 </dt> <dd> 梅朝风 </dd> </dl> </div> <script> function SlideView(e,a){ for(var i=0,o=document.getElementById(e).getElementsByTagName('DL'),d;d=o[i++];)(function(e,c,m,s,t,k,h){ (s=e.style).height=(h=23)+"px"; e.onmouseover=function (){ t=setTimeout(e.open,200); } e.onmouseout=function (){ clearTimeout(t);} e.open=function(){ if (a==e)return; c(k); a&&a.close(); (a=e).className="on"; k=m(function(){ if(h>379)c(k); else s.height=(h=Math.min(h+30, 380))+"px"; }, 10); } e.close = function(){ c(k); e.className=""; k=m(function(){ if(h<24)c(k); else s.height = (h=Math.max(h-30, 23))+"px"; }, 10); } })(d,clearInterval,setInterval); o[0].open(); } new SlideView( "idSlideView3"); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

QQ折叠菜单

javascript+css 新闻显示tab 选项卡效果
跟新浪的比较像啊，tab切换效果，门户类网站用过的，大家可以看看。
2009-04-04
用dtree实现树形菜单 dtree使用说明
本节主要介绍用dtree来实现树形的菜单，需要的朋友可以参考下。
2011-10-10
msn上的tab功能Firefox对childNodes处理的一个BUG
今天公司用到一个tab功能发现 msn上的不错，但是在firefox兼容不好，msn他们的方法就是用了不少的div包含，不过网上有高人解决了。
2008-01-01
一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera
一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera...
2007-05-05
用js实现网页上模仿桌面右键菜单
用js实现网页上模仿桌面右键菜单...
2007-03-03
原生JS仿苹果任务栏菜单，放大效果的菜单
原生JS仿苹果任务栏菜单，具备图标放大效果的菜单，原生JavaScript自定的特效，鼠标放到菜单上就把图标放大了，类似使用了jQuery的效果，里面用到了几张菜单图片，这个那就自己下载吧。
2011-08-08
javascript 定时自动切换的选项卡Tab
JavaScript配合CSS制作一个能自动切换的网页选项卡,每隔一段时间,它就自动切换选项卡列表和标题,时间自设.
2009-10-10
javascript 静态树菜单实现代码
coding这么多年，我居然不知道有"dl"这种html标记，惭愧啊，今天偶然发现，觉得好玩，如是我为它添加了折叠功能，变成了一颗静态树.
2010-12-12
基于jquery的slideDown和slideUp做手风琴
slideDown和slideUp做手风琴菜单面板的代码，也就是大家常说的折叠/展开菜单，不少朋友都喜欢的风格，本代码兼容性好，简单易懂，便于修改，希望大家喜欢。
2011-02-02
javascript实现表现、结构、行为分离的选项卡效果！
javascript实现表现、结构、行为分离的选项卡效果！...
2007-05-05

代码经过精简后的仿QQ折叠菜单代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具