CSS垂直导航菜单

 首页 > 网页特效 > 菜单特效 > CSS垂直导航菜单

CSS垂直导航菜单

 2018-07-04  468  收藏  0 赞一个  0 真差劲  0 去评论

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简洁实用的垂直导航菜单</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:right;
}
</style>
</head>
<body>
<h3>简洁实用的垂直导航菜单</h3>
<div id="idSlideView3" class="sv3">
  <dl class="on">
    <dt>DIV+CSS模板 </dt>
    <dd> 内容一 </dd>
  </dl>
  <dl>
    <dt> 后台模板</dt>
    <dd> 内容二 </dd>
  </dl>
  <dl>
    <dt> CSS菜单 </dt>
    <dd> 内容三 </dd>
  </dl>
  <dl>
    <dt> CSS代码 </dt>
    <dd> 内容四</dd>
  </dl>
  <dl>
    <dt> 源码下载 </dt>
    <dd> 内容五 </dd>
  </dl>
</div>
<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.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>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

CSS代码垂直导航菜单，可以折叠展开的网站菜单，部分功能需要少量JS代码配合实现，有点QQ折叠菜单的风格，本示菜单可用在网站后台左侧、某些在线信息系统中，框架基本出来了，美工好的就继续美化一下，实属不错的菜单。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行