仿腾讯QQ竖直滑动导航菜单
菜单就像qq软件的分组，鼠标经过自动显示相应组的内容。
效果体验网址：http://keleyi.com/a/bjad/nf86w2dv.htm
以下是源代码：
<html>
<head>
<title>仿腾讯QQ竖直滑动导航菜单-柯乐义</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<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:left;
}
.sv3 dl.on dd ul{height:340px;overflow:auto;border:0px solid #021255} .sv3 ul{margin:0px;padding:0px;list-style:none;}
.sv3 .on a {color:White}
.sv3 a{color:Black;text-decoration:none}
.sv3 dd a:hover{color:red;text-decoration:underline}
.sv3 ul li{width:98%;}
</style>
</head>
<body>
<div id="idSlideView3" class="sv3">
<dl class="on">
<dt> <a href="http://keleyi.com/menu/javascript/">Javascript</a> </dt>
<dd> <ul><li><a href="http://keleyi.com/a/bjad/tw09x2nt.htm">日期选择输入js控件</a></li><li><a href="http://keleyi.com/a/bjad/uq2glggu.htm">JS错误引发、捕捉和处理</a></li><li><a href="http://keleyi.com/a/bjad/m51ttmax.htm">js数组的增删访问排序等操作</a></li>
<li><a href="http://keleyi.com/a/bjad/mroxdkos.htm">js桌球小游戏</a></li> <li><a href="http://keleyi.com/a/bjad/9sgmqsee.htm">js实现旋转的3D球体标签云</a></li><li><a href="http://keleyi.com/a/bjac/e1rmndww.htm">使用js判断是否按下了Shift键</a></li>
<li><a href="http://keleyi.com/a/bjac/r9cgfnde.htm">js判断鼠标左、中、右键哪个被点击</a></li><li><a href="http://keleyi.com/a/bjac/3iote6u9.htm">谷歌粘土js特效</a></li><li><a href="http://keleyi.com/a/bjac/p4xiyfgq.htm">js获取网址中某个参数的值</a></li>
<li><a href="http://keleyi.com/a/bjac/a82mwyx9.htm">JSLint介绍</a></li><li><a href="http://keleyi.com/a/bjac/xvcdrv0w.htm">JS输入用户名自动显示邮箱后缀列表</a></li><li><a href="http://keleyi.com/a/bjac/vfbn048n.htm">js的toUpperCase方法</a></li><li><a href="http://keleyi.com/a/bjac/sk5gp5qg.htm">js的toLowerCase方法</a></li>
<li><a href="http://keleyi.com/a/bjac/k6sv8gft.htm">JS的eval()方法</a></li><li><a href="http://keleyi.com/a/bjac/q6ueb725.htm">使用js获取域名</a></li><li><a href="http://keleyi.com/a/bjac/06ysbxv0.htm">JS实现一次搜索百度和必应</a></li><li><a href="http://keleyi.com/a/bjac/jnt8bmec.htm">js生成指定范围内的随机数</a></li>
</ul> </dd>
</dl>
<dl>
<dt> 栏目二 </dt>
<dd> 内容二 </dd>
</dl>
<dl>
<dt> 栏目三 </dt>
<dd> 内容三 </dd>
</dl>
<dl>
<dt> 栏目四 </dt>
<dd> 内容四</dd>
</dl>
<dl>
<dt> <a href="http://keleyi.com/menu/jquery/">jquery</a> </dt>
<dd> <ul id="kmul" style="">
<li><a href="http://keleyi.com/a/bjad/8pwhsjna.htm">jquery带圆圈箭头只有大图左右切换</a></li><li><a href="http://keleyi.com/a/bjad/n828yb7w.htm">jQ的one()方法</a></li>
<li><a href="http://keleyi.com/a/bjad/j2a309yk.htm">jquery在线五子棋代码</a></li><li><a href="http://keleyi.com/a/bjac/45qq7nwu.htm">jQ设置属性的方法</a></li><li><a href="http://keleyi.com/a/bjac/9fy8udxp.htm">jQ设置内容的方法</a></li><li><a href="http://keleyi.com/a/bjac/iqiiedy2.htm">jquery圣诞快乐</a></li>
<li><a href="http://keleyi.com/a/bjac/yg2au6tt.htm">jQuery实现五星级评分</a></li>
<li><a href="http://keleyi.com/a/bjac/jhlwsgyj.htm">高效jquery之维持代码的可读性</a></li>
<li><a href="http://keleyi.com/a/bjac/aq4x9fay.htm">高效jquery之链式操作</a></li>
<li><a href="http://keleyi.com/a/bjac/ijatfk5d.htm">高效jquery之精简javascript</a></li>
<li><a href="http://keleyi.com/a/bjac/h2dj4d34.htm">ddsmoothmenu导航菜单</a></li><li><a href="http://keleyi.com/a/bjac/hkppr014.htm">qq空间返回顶部jqurey效果</a></li>
<li><a href="http://keleyi.com/a/bjac/qjaheda1.htm">jquery右键菜单插件</a></li><li><a href="http://keleyi.com/a/bjac/fntmi3c3.htm" title="jquery插件柯乐义菜单0.1.9(支持IE6等)">jquery插件柯乐义菜单0.1.9(支持IE...</a></li>
<li><a href="http://keleyi.com/a/bjac/mwmee1ns.htm" title="高效jquery之请使用'On'函数">高效jquery之请使用'On'函...</a></li><li><a href="http://keleyi.com/a/bjac/1hfasts2.htm">高效jquery之单Var模式</a></li><li><a href="http://keleyi.com/a/bjac/y9g81v65.htm">jquery插件开发的经验总结</a></li>
<li><a href="http://keleyi.com/a/bjac/0xusjq8m.htm">jquery分页插件应用实例</a></li>
</ul> </dd>
</dl>
</div>
<script type="text/javascript">
function SlideView(e) {
for (var r = document.getElementById(e).getElementsByTagName('dl'), c = clearInterval, i = -1, p = r[0], j; j = r[++i]; ) {
j.style.height = (i ? 24 : 379) + 'px';
j.onmouseover = function () { clearTimeout(j); var i = this; j = setTimeout(function () { if (p != i) _(p, 379, 24)(p = i, 24, 379) }, 200) };
}
function _(el, f, t) {
c(el.$1); el.className = f > t ? '' : 'on';
return el.$1 = setInterval(function () { el.style.height = (f += Math[f > t ? 'floor' : 'ceil']((t - f) * .3)) + 'px'; if (f == t) c(el.$1) }, 10), _
}
};
new SlideView("idSlideView3");
</script>
</body>
</html>
web前端：http://www.cnblogs.com/jihua/p/webfront.html
仿腾讯QQ竖直滑动导航菜单的更多相关文章
- 高仿腾讯QQ最终版
之前写过一篇关于高仿腾讯QQ的博客,不知道的看这:http://blog.csdn.net/htq__/article/details/51840273 ,主要是从界面上高仿了腾讯QQ,在UI上基本上 ...
- jquery和css3实现滑动导航菜单
效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...
- 高仿腾讯QQ即时通讯IM项目
前言:其实这个项目早就开发完成了,在本人的github上,本来没打算写成博客的形式,因为一个项目要写出来要花很久,但是最近看到很多 人在我的github上download后随意发布到网上,本来上传到g ...
- jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。
公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...
- 使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...
- 完美拖拽 &&仿腾讯微博效果&& 自定义多级右键菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery滑动导航菜单
js: $(function(){ $("ul.sub").parent().append("<span></span>"); $(&q ...
- ListView滑动删除 ，仿腾讯QQ
转载请表明出处:http://blog.csdn.net/lmj623565791/article/details/22961279 在CSDN上开了很多大神们的文章,感觉受益良多,也非常欣赏大家的分 ...
- 基于Vue2、WebSocket的仿腾讯QQ
概述 本项目基于Vue2进行高仿手机QQ的webapp,UI上使用的是museUI,使用springMVC搭建的后台.聊天方面,使用WebSocket实现浏览器与服务器全双工通信,允许服务器主动发送信 ...
随机推荐
- 不care小米，梁军坦言微鲸才是乐视最大对手
除了每天毫无悬念地上头条和陷入困境的生态帝国之外,乐视还要继续操心着它的对手们."挑事儿"的小米已经不足为惧,后起之秀微鲸成了一个令它"头疼"的所在.因为,不仅 ...
- C#设计模式-外观模式
在软件开发过程中,客户端程序经常会与复杂系统的内部子系统进行耦合,从而导致客户端程序随着子系统的变化而变化,然而为了将复杂系统的内部子系统与客户端之间的依赖解耦,从而就有了外观模式,也称作 ”门面“模 ...
- 微信蓝牙设备开发教程之获取设备deviceid和二维码(3)
文章转载地址 http://www.vxzsk.com/87.html 设备授权 调用 设备授权新接口 ,获取deviceid和二维码,然后利用获取到的deviceid更新设备属性(如mac地址, ...
- Linux服务器常用操作
Context 客户端:MacOS Terminal终端 服务器端:Linux v2.6 更新项目 进程 查看:ps -ef | grep * 杀死:kill -9 <pid> 数据库 备 ...
- Android之线程池深度剖析
1.线程池的引入 引入的好处: 1)提升性能.创建和消耗对象费时费CPU资源 2)防止内存过度消耗.控制活动线程的数量,防止并发线程过多. 使用条件: 假设在一台服务器完成一 ...
- OracleDBA之数据库管理
以下这些东西是我的麦库上存的当时学Oracle的学习笔记今天拿出来和大家分享一下,转载请注明出处,下面用的Oracle的版本是10g,用的时WinServer2003的操作系统,可能有些命令和Orac ...
- MyCAT简易入门
MyCAT是mysql中间件,前身是阿里大名鼎鼎的Cobar,Cobar在开源了一段时间后,不了了之.于是MyCAT扛起了这面大旗,在大数据时代,其重要性愈发彰显.这篇文章主要是MyCAT的入门部署. ...
- 表空间基于时间点的恢复(TSPITR)
环境:RHEL 6.4 + Oracle 11.2.0.4 准备模拟环境 1. 验证表空间的依赖性 2. 确定执行TSPITR后会丢失的对象 3. 自动执行TSPITR Reference 准备模拟环 ...
- Cesium原理篇：7最长的一帧之Entity(下)
上一篇,我们介绍了当我们添加一个Entity时,通过Graphics封装其对应参数,通过EntityCollection.Add方法,将EntityCollection的Entity传递到DataSo ...
- 如何用easyui+JAVA 实现动态拼凑datagrid表格
先给大家看一看效果,最近一段时间都在研究这个东西. 如果我把日期间隔选宽呢?比如5月日到5月5日?下面给大家看看效果,不用担心哦 看到了吧,哈哈,这个日期都是动态生成的,下面就来跟大家分享一下这个的实 ...