菜单就像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竖直滑动导航菜单的更多相关文章

  1. 高仿腾讯QQ最终版

    之前写过一篇关于高仿腾讯QQ的博客,不知道的看这:http://blog.csdn.net/htq__/article/details/51840273 ,主要是从界面上高仿了腾讯QQ,在UI上基本上 ...

  2. jquery和css3实现滑动导航菜单

    效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...

  3. 高仿腾讯QQ即时通讯IM项目

    前言:其实这个项目早就开发完成了,在本人的github上,本来没打算写成博客的形式,因为一个项目要写出来要花很久,但是最近看到很多 人在我的github上download后随意发布到网上,本来上传到g ...

  4. jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  5. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

  6. 完美拖拽 &&仿腾讯微博效果&& 自定义多级右键菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery滑动导航菜单

    js: $(function(){ $("ul.sub").parent().append("<span></span>"); $(&q ...

  8. ListView滑动删除 ，仿腾讯QQ

    转载请表明出处:http://blog.csdn.net/lmj623565791/article/details/22961279 在CSDN上开了很多大神们的文章,感觉受益良多,也非常欣赏大家的分 ...

  9. 基于Vue2、WebSocket的仿腾讯QQ

    概述 本项目基于Vue2进行高仿手机QQ的webapp,UI上使用的是museUI,使用springMVC搭建的后台.聊天方面,使用WebSocket实现浏览器与服务器全双工通信,允许服务器主动发送信 ...

随机推荐

  1. NodeJS中 package.json各属性分析

    package.json 中包含各种所需模块以及项目的配置信息(名称.版本.许可证等)meta 信息. Name:它属于必须字段,在package.json中最重要的就是name和version字段, ...

  2. iOS-应用闪退总结

    一.之前上架的 App 在 iOS 9 会闪退问题(iOS系统版本更新,未配置新版本导致闪退问题) 最新更新:(2015.10.02) 开发环境: Delphi 10 Seattle OS X El ...

  3. iOS-屏幕适配-UI布局

    iOS 屏幕适配:autoResizing autoLayout和sizeClass 一.图片解说 -------------------------------------------------- ...

  4. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  5. jQuery2.0.3源码分析系列(28) 元素大小

    最近的分析都是有点不温不火,基本都是基础的回顾了 今年博客的目标目前总的来说有2大块 JS版的设计模式,会用jQuery来诠释 JS版的数据结构,最近也一直在狠狠的学习中. HTML息息相关的的样式 ...

  6. Hibernate的数据删除，更改

    其他未给出代码,请参考上一篇.... 一.数据的删除 方法1.从“多”的一方进行数据的删除 books.hbm.xml文件不变: <many-to-one name="publishe ...

  7. Javascript与ECMAScript

    我们经常习惯性认为Javascript就是ECMAScript,但其实不是这样的. ECMAScript是一种脚本在语法和语义上的标准. 主要包括:语法.类型.语句.关键字.保留字.操作符.对象. 它 ...

  8. ZOJ Problem Set - 1350 The Drunk Jailer ac代码 memset

    这是一道很简单的题目,题目大概意思说下:就是有n个监狱(编号从1到n),第一次全部打开,第二次打开编号为2的倍数的,第三次打开编号为3的倍数的,以此类推...最后问你有几个监狱是打开的 题目中我使用了 ...

  9. 关于引用PagerSlidingTabStrip无法引用的问题

    本人仅仅是在安卓学习阶段,在做左右滑动时,用ViewPager总是有各种各样的问题. 如今在github上已经有了这个开源项目PagerSlidingTabStrip,和ViewPager结合在一起会 ...

  10. 【JUC】JUC锁框架综述

    一.前言 在分析完了集合框架后,很有必要接着分析java并发包下面的源码,JUC(java.util.concurrent)源码也是我们学习Java迈进一步的重要过程.我们分为几个模块进行分析,首先是 ...