Hola
Panino5001
Gracias por tu aportación.
Mira.. si te descargas este ejemplo que me has pasado, y te quedas con la parte correspondiente al listado del menú, los CSS y el Javascript, todo funciona correctamente, ¿ok?
Entonces...
Si aplicamos en el despliegue del menú y en el cierre la función de JQUERY
sildeToogle, puedes ver que no funciona correctamente (se pierden los eventos y se abre y cierra el submenú constantemente.
Te pongo el ejemplo para que veas lo que te digo...
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>addEvent() recoding contest entry</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
/* WRITE THESE FUNCTIONS */
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( "on"+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}
/* DON'T TOUCH THESE FUNCTIONS */
addEvent(window,"load",init);
function init()
{
var x = document.getElementById('navigation').getElementsByTagName('li');
for (var i=0;i<x.length;i++)
{
addEvent(x[i],"mouseover",showSubNav);
addEvent(x[i],"mouseout",hideSubNav);
addEvent(x[i],"mouseover",showBorder);
addEvent(x[i],"mouseout",hideBorder);
}
}
function removeBorders()
{
var x = document.getElementById('navigation').getElementsByTagName('li');
for (var i=0;i<x.length;i++)
{
removeEvent(x[i],"mouseover",showBorder);
removeEvent(x[i],"mouseout",hideBorder);
}
}
function showSubNav(e)
{
// this.className += ' over';
jQuery("#" + "submenu_" + this.id).slideToggle("fast");
}
function hideSubNav(e)
{
// this.className = this.className.replace(/over/g,'');
jQuery("#" + "submenu_" + this.id).slideToggle("fast");
noBubble(e);
}
function showBorder(e)
{
this.className += ' current';
}
function hideBorder(e)
{
this.className = this.className.replace(/current/g,'');
noBubble(e);
}
function noBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation();
else
window.event.cancelBubble = true;
}
</script>
<style type="text/css">
<!--
ul#navigation {
width: 150px;
}
li {
border: 1px solid #ffffff;
}
li ul {
display: none;
}
li.over ul {
display: block;
}
li.current {
border-color: #cc0000;
}
-->
</style>
</head>
<body>
<h1><code>addEvent()</code> recoding contest entry</h1>
<ul id="navigation">
<li id="menu1"><a href="#">Item 1</a>
<ul id="submenu_menu1">
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li id="menu2"><a href="#">Item 2</a>
<ul id="submenu_menu2">
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
<li><a href="#">Item 2.3</a></li>
</ul>
</li>
<li id="menu3"><a href="#">Item 3</a>
<ul id="submenu_menu3">
<li><a href="#">Item 3.1</a></li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
</ul>
</body>
</html>
Si te fijas en la parte de Javascript, he comentado las acciones que ocultan y muestran el menú, y debajo, he puesto las llamadas a JQUERY para que haga el efecto deseado.
si tienes un hueco, échale un ojo y a ver qué me puedes comentar.
Un saludo.
PD: descárgate o usa la librería JQUERY que tengas (yo a mi objeto
$ lo he denominado
jQuery
A ver que me puedes contar!!!
Javier