仿腾讯QQ竖直滑动导航菜单

菜单就像qq软件的分组,鼠标经过自动显示相应组的内容。

效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm

以下是源代码:

仿腾讯QQ竖直滑动导航菜单
  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之请使用&#39;On&#39;函数">高效jquery之请使用&#39;On&#39;函...</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>
仿腾讯QQ竖直滑动导航菜单

web前端:http://www.cnblogs.com/jihua/p/webfront.html

仿腾讯QQ竖直滑动导航菜单

上一篇:TEST 4.1


下一篇:Pox组件