Perdona dar la tabarra otra vez, pero mientras probaba el submenú me he dado cuenta de una cosa que antes al tener un solo nivel no pasaba.
Resulta que si tienes en el primer apartado 6 menus que contienen a su vez 4 apartatados cada uno. Cuando desplegas el primer apartado parece como si cargase todo el modulo entero. Hace un efecto visual nada limpio, claro... o como quieras llamarlo.
Es decir se expande hasta el maximo y luego se contrae todo. Y solo aparece cuando hay apartados que a su vez contienen a otros apartados.
Dejo el codigo completo por si alguien quiere probar el efecto que produce al desplegar el primer apartado.
Lo he probado tanto en FF como en IE, pero sucede lo mismo y la verdad es que sino fuese por ese detalle el menu esta chulo.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slashdot's Menu</title>
<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />
<script type="text/javascript" src="sdmenu/sdmenu.js">
/***********************************************
* Slashdot Menu script- By DimX
* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script>
</head>
<body>
<div style="float: left" id="my_menu" class="sdmenu">
<div>
<span>Apartado 1</span>
<div>
<span class="segundo">Seccion 1</span>
<a href="pag2.html">aaaaa 1</a>
<a href="pag2.html">aaaaa 2</a>
<a href="pag2.html">aaaaa 3</a>
<a href="pag2.html">aaaaa 4</a>
</div>
<div>
<span class="segundo">Seccion 2</span>
<a href="pag2.html">bbbbb 1</a>
<a href="pag2.html">bbbbb 2</a>
<a href="pag2.html">bbbbb 3</a>
<a href="pag2.html">bbbbb 4</a>
</div>
<div>
<span class="segundo">Seccion 3</span>
<a href="pag2.html">ccccc 1</a>
<a href="pag2.html">ccccc 2</a>
<a href="pag2.html">ccccc 3</a>
<a href="pag2.html">ccccc 4</a>
</div>
<div>
<span class="segundo">Seccion 4</span>
<a href="pag2.html">ddddd 1</a>
<a href="pag2.html">ddddd 2</a>
<a href="pag2.html">ddddd 3</a>
<a href="pag2.html">ddddd 4</a>
</div>
<div>
<span class="segundo">Seccion 5</span>
<a href="pag2.html">eeeee 1</a>
<a href="pag2.html">eeeee 2</a>
<a href="pag2.html">eeeee 3</a>
<a href="pag2.html">eeeee 4</a>
</div>
<div>
<span class="segundo">Seccion 6</span>
<a href="pag2.html">fffff 1</a>
<a href="pag2.html">fffff 2</a>
<a href="pag2.html">fffff 3</a>
<a href="pag2.html">fffff 4</a>
</div>
</div>
<div>
<span>Apartado 2</span>
<a href="pag2.html">ggggg 1</a>
<a href="pag2.html">ggggg 2</a>
<a href="pag2.html">ggggg 3</a>
</div>
<div class="collapsed">
<span>Apartado 3</span>
<a href="pag2.html">hhhhh 1</a>
<a href="pag2.html">hhhhh 2</a>
<a href="pag2.html">hhhhh 3</a>
</div>
</div>
</body>
</html> HOJA DE ESTILO
Código:
div.sdmenu {
width: 150px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(bottom.gif) no-repeat right bottom;
color: #fff;
}
div.sdmenu div {
background: url(title.gif) repeat-x;
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: white;
background: url(expanded.gif) no-repeat 10px center;
cursor: default;
border-bottom: 1px solid #ddd;
}
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: #066;
}
div.sdmenu div a.current {
background : #ccc;
}
div.sdmenu div a:hover {
background : #066 url(linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}
div.sdmenu div a, div.sdmenu div span.segundo {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div span.segundo {text-decoration: underline;}
JAVASCRIPT
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 = 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);
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=/";
}
};
O para quien quiera descargarse todo el codigo de la web.
http://www.dynamicdrive.com/dynamicindex1/sdmenu.zip
Gracias de nuevo!