Buenos dias, tengo un problema tengo un menu multinivel vertical, el lio es que cuando abro un submenu tambien me queda abierto el que antes habia usado, la idea es que cuando abra otro submenu me cierre automaticamente el anterior visitado. dejo el codigo si me pueden ayudar. si alguien quiere le envio todo por correo las imagenes y el codigo completo.
EL JS
Código:
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 = 4;
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);
else
this.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=/";
}
};
EL CSS
Código:
div.sdmenu1 {
width: 160px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(bottom.gif) no-repeat right bottom;
color: #00CC66;
}
div.sdmenu1 div {
background: url(title.gif);
overflow: hidden;
}
div.sdmenu1 div:first-child {
background: url(toptitle.gif) no-repeat;
}
div.sdmenu1 div.collapsed {
height: 25px;
}
div.sdmenu1 div span {
display: block;
padding: 5px 25px;
font-weight: bold;
color: #FFFFFF;
background: url(expanded.gif) no-repeat 10px center;
cursor: default;
border-bottom-width: 1px;
border-bottom-style: solid;
}
div.sdmenu1 div.collapsed span {
background-image: url(collapsed.gif);
}
div.sdmenu1 div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #666666;
}
div.sdmenu1 div a.current {
background : #ccc;
}
div.sdmenu1 div a:hover {
text-decoration: none;
background-color: #FF9900;
background-image: url(linkarrow.gif);
background-repeat: no-repeat;
background-position: right center;
font-weight: bold;
color: #FFFFFF;
}
div.sdmenu {
width: 160px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(bottom.gif) no-repeat right bottom;
color: #00CC66;
}
div.sdmenu div {
background: url(title1.gif);
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
padding: 5px 25px;
font-weight: bold;
color: #FFFFFF;
background: url(expanded.gif) no-repeat 10px center;
cursor: default;
border-bottom-width: 1px;
border-bottom-style: solid;
}
div.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
}
div.sdmenu div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #666666;
}
div.sdmenu div a.current {
background : #ccc;
}
div.sdmenu div a:hover {
text-decoration: none;
background-color: #FF9900;
background-image: url(linkarrow.gif);
background-repeat: no-repeat;
background-position: right center;
font-weight: bold;
color: #FFFFFF;
}