Chinaunix首页 | 论坛 | 博客

chunzhisu的ChinaUnix博客

首页　| 　博文目录　| 　关于我

chunzhisu

  • 博客访问： 76723
  • 博文数量： 73
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 740
  • 用 户 组： 普通用户
  • 注册时间： 2014-07-04 16:50
文章分类

全部博文（73）

文章存档

2014年（73）

我的朋友
最近访客
推荐博文
CSS+JS打造的感应鼠标的QQ伸缩菜单

分类： Html/Css

2014-07-07 16:06:49


点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  3. <head>
  4. <title></title>
  5. <meta http-equiv="content-type" content="text/html;charset=gb2312">
  6. <style type="text/css">
  7. .sv3 dl,.sv3 dt,.sv3 dd{
  8.     padding:0;
  9.     margin:0;
  10. }
  11. .sv3{
  12.     width:240px;
  13.     border:1px solid #BFC7D9;
  14. }
  15. .sv3 dl{
  16.     width:240px;
  17.     height:320px;
  18.     background:#EDF5FF;
  19.     overflow:hidden;
  20. }
  21. .sv3 dt{
  22.     padding:5px 10px;
  23.     height:13px;
  24.     font-size:13px;
  25.     color:#000;
  26.     background:#E5ECF9;
  27.     border-top:1px solid #fff;
  28.     border-bottom:1px solid #BFC7D9;
  29. }
  30. .sv3 dl.on dt{
  31.     background:#3366CC;
  32.     color:#FFF;
  33.     font-weight:bold;
  34. }
  35. .sv3 dd{
  36.     padding:10px;
  37.     color:#333;
  38.     font-size:12px;
  39.     line-height:1.5em;
  40. }
  41. .sv3 dd a:link,
  42. .sv3 dd a:visited,
  43. .sv3 dd a:hover,
  44. .sv3 dd a:active{
  45.     color:#333;
  46.     display:block;
  47.     text-align:right;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <h3>简洁实用的垂直导航菜单</h3>
  53. <div id="idSlideView3" class="sv3">
  54.   <dl class="on">
  55.     <dt>DIV+CSS模板 </dt>
  56.     <dd> 内容一 </dd>
  57.   </dl>
  58.   <dl>
  59.     <dt> 后台模板</dt>
  60.     <dd> 内容二 </dd>
  61.   </dl>
  62.   <dl>
  63.     <dt> CSS菜单 </dt>
  64.     <dd> 内容三 </dd>
  65.   </dl>
  66.   <dl>
  67.     <dt> CSS代码 </dt>
  68.     <dd> 内容四</dd>
  69.   </dl>
  70.   <dl>
  71.     <dt> 友情链接 </dt>
  72.     <dd> 内容五 </dd>
  73.   </dl>
  74. </div>
  75. <script language="javascript">
  76. function SlideView(e){
  77.    for(var r=document.getElementById(e).getElementsByTagName('dl'),c=clearInterval,i=-1,p=r[0],j; j=r[++i];){
  78.        j.style.height=(i?24:319)+'px';
  79.        j.onmouseover=function(){clearTimeout(j);var i=this;j=setTimeout(function(){if(p!=i)_(p,319,24)(p=i,24,319)},200)};
  80.    }
  81.    function _(el,f,t){
  82.        c(el.$1);el.className=f>t?'':'on';
  83.        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),_
  84.    }
  85. };
  86. new SlideView( "idSlideView3");
  87. </script>
  88. </body>
  89. </html>

阅读(197) | 评论(0) | 转发(0) |
0

上一篇：CSS实现背景图片居中

下一篇：CSS自动加序号-多种有序列表数字序号效果

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6