垂直列表导航CSS（仿foxmail）

<%@page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %> <%@page import="com.itiptop.kernel.core.GBeanManager"%> <%@page import="com.itiptop.kernel.core.ServiceRegistry"%> <%@page import="java.util.List"%> <%@page import="com.itiptop.kernel.gbean.GBean"%> <mce: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; overflow:hidden; } .sv3 dt{ padding:5px 10px; height:13px; font-size:13px; color:#000; background:#cccddd; border: 1px solid transparent; border-top:1px solid #fff; border-bottom:1px solid #BFC7D9; color: #FFFFFF; display: block; font-weight: bold; text-decoration: none; text-shadow: 0.2em 0.1em 0.3em #000; } .sv3 dl.on dt{ background:#33B6E8; color:#FFFFFF; font-weight:bold; } .sv3 dd{ background: none repeat scroll 0 0 #FDF3AE; border: 1px solid #DDDDDD; color: #333333; font-size: 12px; line-height: 1.5em; padding: 5px; } .sv3 dd a:link, .sv3 dd a:visited, .sv3 dd a:hover, .sv3 dd a:active{ text-decoration: none; border: solid 1px transparent; display: block; color: #606F79; //text-shadow: 0.2em 0.1em 0.3em #606F79; } --></mce:style><style type="text/css" mce_bogus="1">.sv3 dl,.sv3 dt,.sv3 dd{ padding:0; margin:0; } .sv3{ width:240px; border:1px solid #BFC7D9; } .sv3 dl{ width:240px; height:380px; overflow:hidden; } .sv3 dt{ padding:5px 10px; height:13px; font-size:13px; color:#000; background:#cccddd; border: 1px solid transparent; border-top:1px solid #fff; border-bottom:1px solid #BFC7D9; color: #FFFFFF; display: block; font-weight: bold; text-decoration: none; text-shadow: 0.2em 0.1em 0.3em #000; } .sv3 dl.on dt{ background:#33B6E8; color:#FFFFFF; font-weight:bold; } .sv3 dd{ background: none repeat scroll 0 0 #FDF3AE; border: 1px solid #DDDDDD; color: #333333; font-size: 12px; line-height: 1.5em; padding: 5px; } .sv3 dd a:link, .sv3 dd a:visited, .sv3 dd a:hover, .sv3 dd a:active{ text-decoration: none; border: solid 1px transparent; display: block; color: #606F79; //text-shadow: 0.2em 0.1em 0.3em #606F79; } </style> <% GBeanManager om=ServiceRegistry.getGlobalGBeanManager(); %> <div id="idSlideView3" class="sv3"> <dl class="on"> <dt>供热热源 </dt> <%List<GBean> hs= om.findGBean("heatSource"); for(GBean b:hs){%> <dd><a href=""><%=b.getLabel() %></a></dd> <%} %> </dl> <dl> <dt> 换热站</dt> <%List<GBean> xs= om.findGBean("exchangestation"); for(GBean b:xs){%> <dd><a href=""><%=b.getLabel() %></a></dd> <%} %> </dl> <dl> <dt> 供热末端 </dt> <%List<GBean> es= om.findGBean("heatterminal"); for(GBean b:es){%> <dd><a href=""><%=b.getLabel() %></a></dd> <%} %> </dl> </div> <mce:script language="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.οnmοuseοver=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"); // --></mce:script>