js展开叠起来分类导航特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js展开叠起来分类导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js展开叠起来分类导航</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
</style>
<link rel="stylesheet" type="text/css" href="css/sdmenu.css" />
<script type="text/javascript" src="js/sdmenu.js"></script>
<script type="text/javascript">
var myMenu;
window.onload = function() {
	myMenu = new SDMenu("my_menu");
	myMenu.init();
};
</script>
</head>
<body>

<div id="my_menu" class="sdmenu">
	<div class="collapsed">
		<span>在线工具</span>
		<a href="#">图像优化</a>
		<a href="#">收藏夹图标生成器</a>
		<a href="#">邮件出谜语的人</a>
		<a href="#">htaccess密码</a>
		<a href="#">梯度图像</a>
		<a href="#">按钮生成器</a>
	</div>
	<div class="collapsed">
		<span>支持我们</span>
		<a href="#">推荐我们</a>
		<a href="#">链接我们</a>
		<a href="#">网络资源</a>
	</div>
	<div class="collapsed">
		<span>合作伙伴</span>
		<a href="#">JavaScript工具包</a>
		<a href="#">CSS驱动</a>
		<a href="#">CodingForums</a>
		<a href="#">CSS例子</a>
	</div>
	<div >
		<span>测试电流</span>
		<a href="#">Current or not</a>
		<a href="#">Current or not</a>
		<a href="#">Current or not</a>
		<a href="#">Current or not</a>
	</div>
</div>
</body>
</html>

JS代码(sdmenu.js):

function SDMenu(id){
	if (!document.getElementById || !document.getElementsByTagName)return false;
	this.menu = document.getElementById(id);
	this.submenus = this.menu.getElementsByTagName("div");
	this.remember = true;
	this.speed = 3;
	this.markCurrent = true;
	this.oneSmOnly = false;
}
SDMenu.prototype.init = function(){
	var mainInstance = this;
	for (var i = 0;
	i < this.submenus.length;
	i++)this.submenus[i].getElementsByTagName("span")[0].onclick = function(){
	mainInstance.toggleMenu(this.parentNode);
}
;
	if (this.markCurrent){
	var links = this.menu.getElementsByTagName("a");
	for (var i = 0;
	i < links.length;
	i++)if (links[i].href == document.location.href){
	links[i].className = "current";
	break;
}
}
if (this.remember){
	var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
	var match = regex.exec(document.cookie);
	if (match){
	var states = match[1].split("");
	for (var i = 0;
	i < states.length;
	i++)this.submenus[i].className = (states[i] == 0 ? "collapsed":"");
}
}
}
;
	SDMenu.prototype.toggleMenu = function(submenu){
	if (submenu.className == "collapsed")this.expandMenu(submenu);
	elsethis.collapseMenu(submenu);
}
;
	SDMenu.prototype.expandMenu = function(submenu){
	var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
	var links = submenu.getElementsByTagName("a");
	for (var i = 0;
	i < links.length;
	i++)fullHeight += links[i].offsetHeight;
	var moveBy = Math.round(this.speed * links.length);
	var mainInstance = this;
	var intId = setInterval(function(){
	var curHeight = submenu.offsetHeight;
	var newHeight = curHeight + moveBy;
	if (newHeight < fullHeight)submenu.style.height = newHeight + "px";
	else{
	clearInterval(intId);
	submenu.style.height = "";
	submenu.className = "";
	mainInstance.memorize();
}
}
,30);
	this.collapseOthers(submenu);
}
;
	SDMenu.prototype.collapseMenu = function(submenu){
	var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
	var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
	var mainInstance = this;
	var intId = setInterval(function(){
	var curHeight = submenu.offsetHeight;
	var newHeight = curHeight - moveBy;
	if (newHeight > minHeight)submenu.style.height = newHeight + "px";
	else{
	clearInterval(intId);
	submenu.style.height = "";
	submenu.className = "collapsed";
	mainInstance.memorize();
}
}
,30);
}
;
	SDMenu.prototype.collapseOthers = function(submenu){
	if (this.oneSmOnly){
	for (var i = 0;
	i < this.submenus.length;
	i++)if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")this.collapseMenu(this.submenus[i]);
}
}
;
	SDMenu.prototype.expandAll = function(){
	var oldOneSmOnly = this.oneSmOnly;
	this.oneSmOnly = false;
	for (var i = 0;
	i < this.submenus.length;
	i++)if (this.submenus[i].className == "collapsed")this.expandMenu(this.submenus[i]);
	this.oneSmOnly = oldOneSmOnly;
}
;
	SDMenu.prototype.collapseAll = function(){
	for (var i = 0;
	i < this.submenus.length;
	i++)if (this.submenus[i].className != "collapsed")this.collapseMenu(this.submenus[i]);
}
;
	SDMenu.prototype.memorize = function(){
	if (this.remember){
	var states = new Array();
	for (var i = 0;
	i < this.submenus.length;
	i++)states.push(this.submenus[i].className == "collapsed" ? 0:1);
	var d = new Date();
	d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
	document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + ";
	expires=" + d.toGMTString() + ";
	path=/";
}
}
;

CSS代码(sdmenu.css):

@charset "utf-8";/* sdmenu */
div.sdmenu{width:150px;margin:0 auto;font-family:Arial,sans-serif;font-size:12px;padding-bottom:10px;background:url(../images/bottom.gif) no-repeat right bottom;color:#fff;}
div.sdmenu div{background:url(../images/title.gif) repeat-x;overflow:hidden;}
div.sdmenu div:first-child{background:url(../images/toptitle.gif) no-repeat;}
div.sdmenu div.collapsed{height:25px;}
div.sdmenu div span{display:block;height:15px;line-height:15px;overflow:hidden;padding:5px 25px;font-weight:bold;color:white;background:url(../images/expanded.gif) no-repeat 10px center;cursor:pointer;border-bottom:1px solid #ddd;}
div.sdmenu div.collapsed span{background-image:url(../images/collapsed.gif);}
div.sdmenu div a{padding:5px 10px;background:#eee;display:block;border-bottom:1px solid #ddd;color:#066;}
div.sdmenu div a.current{background:#ccc;}
div.sdmenu div a:hover{background:#066 url(../images/linkarrow.gif) no-repeat right center;color:#fff;text-decoration:none;}

附件:下载该文件资源,减少时间成本(增值服务)