仿腾讯QQ竖直滑动导航菜单
菜单就像qq软件的分组,鼠标经过自动显示相应组的内容。
效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm
以下是源代码:
1 <html>
2 <head>
3 <title>仿腾讯QQ竖直滑动导航菜单-柯乐义</title>
4 <meta http-equiv="content-type" content="text/html;charset=utf-8">
5 <style type="text/css">
6 .sv3 dl,.sv3 dt,.sv3 dd{ 7 padding:0;
8 margin:0;
9 }
10 .sv3{ 11 width:240px;
12 border:1px solid #BFC7D9;
13 }
14 .sv3 dl{ 15 width:240px;
16 height:380px;
17 background:#EDF5FF;
18 overflow:hidden;
19 }
20 .sv3 dt{ 21 padding:5px 10px;
22 height:13px;
23 font-size:13px;
24 color:#000;
25 background:#E5ECF9;
26 border-top:1px solid #fff;
27 border-bottom:1px solid #BFC7D9;
28 }
29 .sv3 dl.on dt{ 30 background:#3366CC;
31 color:#FFF;
32 font-weight:bold;
33 }
34 .sv3 dd{ 35 padding:10px;
36 color:#333;
37 font-size:12px;
38 line-height:1.5em;
39 }
40 .sv3 dd a:link,
41 .sv3 dd a:visited,
42 .sv3 dd a:hover,
43 .sv3 dd a:active{ 44 color:#333;
45 display:block;
46 text-align:left;
47 }
48 .sv3 dl.on dd ul{height:340px;overflow:auto;border:0px solid #021255}
49
50 .sv3 ul{margin:0px;padding:0px;list-style:none;}
51 .sv3 .on a {color:White}
52 .sv3 a{color:Black;text-decoration:none}
53 .sv3 dd a:hover{color:red;text-decoration:underline}
54 .sv3 ul li{width:98%;}
55 </style>
56 </head>
57 <body>
58 <div id="idSlideView3" class="sv3">
59 <dl class="on">
60 <dt> <a href="http://keleyi.com/menu/javascript/">Javascript</a> </dt>
61 <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>
62 <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>
63 <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>
64 <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>
65 <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>
66 </ul> </dd>
67 </dl>
68 <dl>
69 <dt> 栏目二 </dt>
70 <dd> 内容二 </dd>
71 </dl>
72 <dl>
73 <dt> 栏目三 </dt>
74 <dd> 内容三 </dd>
75 </dl>
76 <dl>
77 <dt> 栏目四 </dt>
78 <dd> 内容四</dd>
79 </dl>
80 <dl>
81 <dt> <a href="http://keleyi.com/menu/jquery/">jquery</a> </dt>
82 <dd> <ul id="kmul" style="">
83 <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>
84 <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>
85 <li><a href="http://keleyi.com/a/bjac/yg2au6tt.htm">jQuery实现五星级评分</a></li>
86 <li><a href="http://keleyi.com/a/bjac/jhlwsgyj.htm">高效jquery之维持代码的可读性</a></li>
87 <li><a href="http://keleyi.com/a/bjac/aq4x9fay.htm">高效jquery之链式操作</a></li>
88 <li><a href="http://keleyi.com/a/bjac/ijatfk5d.htm">高效jquery之精简javascript</a></li>
89 <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>
90 <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>
91 <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>
92 <li><a href="http://keleyi.com/a/bjac/0xusjq8m.htm">jquery分页插件应用实例</a></li>
93 </ul> </dd>
94 </dl>
95 </div>
96 <script type="text/javascript">
97 function SlideView(e) {
98 for (var r = document.getElementById(e).getElementsByTagName('dl'), c = clearInterval, i = -1, p = r[0], j; j = r[++i]; ) {
99 j.style.height = (i ? 24 : 379) + 'px';
100 j.onmouseover = function () { clearTimeout(j); var i = this; j = setTimeout(function () { if (p != i) _(p, 379, 24)(p = i, 24, 379) }, 200) };
101 }
102 function _(el, f, t) {
103 c(el.$1); el.className = f > t ? '' : 'on';
104 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), _
105 }
106 };
107 new SlideView("idSlideView3");
108 </script>
109 </body>
110 </html>
web前端:http://www.cnblogs.com/jihua/p/webfront.html
仿腾讯QQ竖直滑动导航菜单相关推荐
- [纪录]仿IOS滚轮效果(竖直滑动选择器)
今天想做一个类似这样的一个效果,可是UI的模板是参考IOS做的,于是就各种百度各种搜,最后让我找到了一个仿IOS滚轮的一个Demo,稍微研究了一下,发上来,大家一起学习,以后也方便我查看,就不用再去百 ...
- 高仿腾讯 QQ,已经实现了纯文本,表情,图片,语音,位置等信息的发送。
QQ 项目地址:HuTianQi/QQ 简介:高仿腾讯 QQ,已经实现了纯文本,表情,图片,语音,位置等信息的发送. 一款高仿腾讯 QQ 的 IM 软件,基于 bmob SDK,已经实现聊天,表情,图 ...
- C# 高仿腾讯QQ (TextBox控件美化)(附源码)
接上一篇<C# 高仿腾讯QQ (Bottom控件美化) > 这篇来说一下QQ皮肤TextBox控件的美化: (1).已修正 每次窗口最小化以后再还原会发现窗口底部往下移了几十个像素(但还不 ...
- Qt编写自定义控件:高亮滑动导航菜单
代码: #ifndef HIGHLIGHTSLIDINGNAVIGATIONMENUWIDGET_H #define HIGHLIGHTSLIDINGNAVIGATIONMENUWIDGET_H#in ...
- 仿 qq登录界面 php,js仿腾讯QQ的web登陆界面
用了腾讯QQ也有将近十年了,今天心血来潮想模仿腾讯QQ的登陆面板做一个web版的登陆面板,然后参考了一些代码,自己模仿,学写了一个. 效果如下: 其中还实现了拖动面板,选择状态的效果 下面是具体代码: ...
- 竖直手风琴导航菜单栏
之前有用原生js实现了菜单栏的展开收缩效果,今天用jquery实现这个效果, 并增加了鼠标点击箭头方向改变的效果. <!DOCTYPE html> <html lang=" ...
- 网页中滑动导航菜单制作
<html> <head> <title>网页特效-导航菜单-滑动的二级导航菜单</title> <meta http-equiv="c ...
- ListView滑动删除 ,仿腾讯QQ
转载请表明出处:http://blog.csdn.net/lmj623565791/article/details/22961279 在CSDN上开了很多大神们的文章,感觉受益良多,也非常欣赏大家的分 ...
- 高仿腾讯QQ Xplan(X计划)的H5页面(2):动画控制
上一篇知道如何制作threejs地球之后,就正式coding了,当然还是使用最心爱的Vue.本篇会有一些代码,但是都是十几行的独立片段,相信你不用担心. 布局 在进入本篇主题前,要简单看一下xplan ...
最新文章
- Python3面向对象编程的三大特性 封装、继承、多态
- Windows 8 应用商店应用开发 之 画刷
- 小程序分享到朋友圈功能_微信小程序开放分享到朋友圈功能
- ThinkPad L440 FN键设置
- 阿里王坚:机器比人做得好的事,那这件事就不该由人来做
- 高性能Numpy/Scipy加速:使用Intel MKL和Intel Compilers或OpenBLAS(待续)
- docker 网络 不好用 docker: Error response from daemon: failed to create endpoint jovial_wing on network b
- SVN代码回滚命令之---svn up ./ -r 版本号---OK
- 安装easy_install 和ipython
- 太赞了,Intellij IDEA竟然把Java8的数据流问题这么完美的解决掉了!
- php粉层,thinkphp 模型分层
- 两个正态总体均值差的检验(t)
- 云计算数据中心是什么,云计算数据中心和传统IDC有何区别?
- 深入浅出--何为多线程(引用自大神Kyrie lrving)
- 比光刻机还重要的IP核是什么?
- 印象笔记,石墨笔记和Effie哪个更适合学生?
- 从来不敷面膜的人_女人不敷面膜的危害 三大危害让你不得不敷面膜
- pdf转换器1.0注册码
- vue实现雪花飘落特效
- Python入门 —— 2048实战(字符界面和图形界面)
热门文章
- DB2 SQL消息查询
- 苹果手机怎么备份所有数据_ORICO手机备份宝,数据备份更轻松
- flex局部的知识总结
- Learn to Give Up
- vnc远程工具的使用教程
- hypemesh 自动批量创建螺栓连接
- 小明对数位中含有 2、0、1、9 的数字很感兴趣,在 1 到 40 中这样的数包 括 1、2、9、10 至 32、39 和 40,共 28 个,他们的和是 574。 请问,在 1 到 2019 中,所
- 计算机 学院派,总校计算机学院派老师来校召开“2+2”联合培养班学生见面会...
- 从今起,我蹲马步,苦练基本功
- 锂电池电量百分比计算_锂离子电池容量计算之电压法