menu desplegable hacia arriba

sintesk7 · #1 (**permalink**) 12/09/2005, 20:19

Hola a todos,

tengo un menu desplegable en javascript que se despliega hacia abajo (con efecto rollover).

¿puede hacerse que se despliegue hacia arriba?

Muchas gracias por su ayuda

derkenuke · #2 (**permalink**) 13/09/2005, 07:53

Sí, porque no se va a poder..

¿Puedo hacerme una pagina web? Pues sí, se puede.

Ahora, no entiendo una pregunta tan generica.

sintesk7 · #3 (**permalink**) 13/09/2005, 11:03

a ver tengo el siguiente archivo .js:

Código PHP:

  slideMenu.Registry = []; 
 
function slideMenu(id,numLines) { 
    slideMenu.Registry[id] = []; 
    slideMenu.Registry[id]['height']       = 1; 
    slideMenu.Registry[id]['containerObj'] = document.getElementById(id+"Container"); 
    slideMenu.Registry[id]['contentObj']   = document.getElementById(id+"Content"); 
    //slideMenu.Registry[id]['maxHeight']    = new Number((numLines * slideMenu.lineHeight) + 2); 
    slideMenu.Registry[id]['maxHeight']    = (slideMenu.Registry[id]['containerObj'].scrollHeight * numLines) - (numLines - 1); 
    slideMenu.Registry[id]['interval']     = null; 
    slideMenu.Registry[id]['timeout']      = null; 
     
    slideMenu.Registry[id]['contentObj'].style.height  = '1px'; 
     
    // slide down events 
    slideMenu.Registry[id]['containerObj'].onmouseover = function() { slideMenu.showMenu(id); } 
    slideMenu.Registry[id]['containerObj'].onfocus     = function() { slideMenu.showMenu(id); } 
     
    // slide up events 
    slideMenu.Registry[id]['containerObj'].onmouseout  = function() { slideMenu.hideMenu(id); } 
    slideMenu.Registry[id]['containerObj'].onblur      = function() { slideMenu.hideMenu(id); } 
} 
 
slideMenu.showMenu = function(id) { 
    clearInterval(slideMenu.Registry[id]['interval']); 
         
    slideMenu.Registry[id]['contentObj'].style.display = 'block'; 
    slideMenu.Registry[id]['contentObj'].style.zIndex += 10; 
     
    slideMenu.Registry[id]['interval'] = window.setInterval("slideMenu.slideDown('"+id+"')",1); 
} 
 
slideMenu.hideMenu = function(id) { 
    clearInterval(slideMenu.Registry[id]['interval']); 
     
    slideMenu.Registry[id]['contentObj'].style.zIndex = 10; 
    slideMenu.Registry[id]['interval'] = window.setInterval("slideMenu.slideUp('"+id+"')",1); 
} 
 
slideMenu.slideDown = function(id) { 
    for(var i=0;i<15;i++) { 
        if(slideMenu.Registry[id]['height'] >= slideMenu.Registry[id]['maxHeight']) { 
            clearInterval(slideMenu.Registry[id]['interval']); 
        } else { 
            slideMenu.Registry[id]['contentObj'].style.height = slideMenu.Registry[id]['height']+'px'; 
            slideMenu.Registry[id]['height'] ++; 
        } 
    } 
} 
 
slideMenu.slideUp = function(id) { 
    for(var i=0;i<15;i++) { 
        if(slideMenu.Registry[id]['height'] <= 1) { 
            clearInterval(slideMenu.Registry[id]['interval']); 
            slideMenu.Registry[id]['contentObj'].style.display = 'none'; 
        } else { 
            slideMenu.Registry[id]['contentObj'].style.height = slideMenu.Registry[id]['height']+'px'; 
            slideMenu.Registry[id]['height'] --; 
        } 
    } 
}

y me gustaría que en lugar de desplegarse el menu hacia abajo, se desplegase hacia arriba.

Muchas gracias

derkenuke · #4 (**permalink**) 13/09/2005, 15:08

Un ejemplo completo estaria bien (digo incluyendo el (x)html y css), porque tal vez, y como he visto en el codigo, la posicion del submenu no este definida en el javascript. Seguramente sera con css.. y para hacerlo en javascript.. deberemos hacer apaños varios.

sintesk7 · #5 (**permalink**) 14/09/2005, 18:50

el css es este:

Código PHP:

  ul#nav                                { clear: left; position: absolute; top: 160px; list-style-type: none; margin: 0px; padding: 0px; width: 773px; background: #333 url('../_images/nav_bk.gif'); } 
ul#nav li                            { display: block; float: left; } 
ul#nav li span                        { border-right: 1px solid #FFF; border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; display: block; width: 128px; } 
ul#nav li a                            { line-height: 23px; display: block; width: 128px; color: #FFF; text-align: center; text-decoration: none; } 
ul#nav li a:hover                    { background-color: 344E92; } 
ul#nav li#menu6Container span        { border-right: none; } 
ul#nav ul                            { margin: 0px; padding: 0px; list-style-type: none; text-align: left; width: 180px; position: absolute;  border-left: 1px solid #FFF; border-right: 1px solid #FFF; overflow: hidden; } 
ul#nav ul li                        { background-color: #213260; } 
ul#nav ul li span                    { border-right: 0px; border-top: 0px; border-bottom: 1px solid #FFF; width: 180px; } 
ul#nav ul li span a                    { width: 180px; text-align: left; padding-left: 5px; }

pero no creo que tenga que ver con la posición del menú, es simlemente que se depliegue hacia arriba en lugar de gacia abajo.

Gracias por su ayuda!

derkenuke · #6 (**permalink**) 14/09/2005, 19:50

Bien, pero con eso hago poco si no leo el (x)html...

sintesk7 · #7 (**permalink**) 15/09/2005, 19:01

aqui está el xhtml:

Código HTML:

<SCRIPT 
src="slidemenu.js" 
type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
//<![CDATA[
function addLoadEvent(func) {
	var oldonload = window.onload;
	if(typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() { 
			oldonload();
			func();
			}
		}
	}

function loadMenu() {

	var menu2 = new slideMenu("menu2",
 
5);
	var menu3 = new slideMenu("menu3",
 
6);
	var menu4 = new slideMenu("menu4",
 
1);
	var menu5 = new slideMenu("menu5",
 
1);
	}
addLoadEvent(loadMenu);
//addLoadEvent(externalLink);
slideMenu.lineHeight = 24;
//]]>
</SCRIPT>

gracias por la ayuda

derkenuke · #8 (**permalink**) 15/09/2005, 19:16

Vamos, si juntamos todo que es lo que te pedia en un principio... resultado:

Código PHP:

  <html> 
 
<head> 
<style> 
 
ul#nav                                { clear: left; position: absolute; top: 160px; list-style-type: none; margin: 0px; padding: 0px; width: 773px; background: #333 url('../_images/nav_bk.gif'); }  
ul#nav li                            { display: block; float: left; }  
ul#nav li span                        { border-right: 1px solid #FFF; border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; display: block; width: 128px; }  
ul#nav li a                            { line-height: 23px; display: block; width: 128px; color: #FFF; text-align: center; text-decoration: none; }  
ul#nav li a:hover                    { background-color: 344E92; }  
ul#nav li#menu6Container span        { border-right: none; }  
ul#nav ul                            { margin: 0px; padding: 0px; list-style-type: none; text-align: left; width: 180px; position: absolute;  border-left: 1px solid #FFF; border-right: 1px solid #FFF; overflow: hidden; }  
ul#nav ul li                        { background-color: #213260; }  
ul#nav ul li span                    { border-right: 0px; border-top: 0px; border-bottom: 1px solid #FFF; width: 180px; }  
ul#nav ul li span a                    { width: 180px; text-align: left; padding-left: 5px; } 
 
 
</style> 
<script> 
 
slideMenu.Registry = [];  
 
function slideMenu(id,numLines) {  
    slideMenu.Registry[id] = [];  
    slideMenu.Registry[id]['height']       = 1;  
    slideMenu.Registry[id]['containerObj'] = document.getElementById(id+"Container");  
    slideMenu.Registry[id]['contentObj']   = document.getElementById(id+"Content");  
    //slideMenu.Registry[id]['maxHeight']    = new Number((numLines * slideMenu.lineHeight) + 2);  
    slideMenu.Registry[id]['maxHeight']    = (slideMenu.Registry[id]['containerObj'].scrollHeight * numLines) - (numLines - 1);  
    slideMenu.Registry[id]['interval']     = null;  
    slideMenu.Registry[id]['timeout']      = null;  
      
    slideMenu.Registry[id]['contentObj'].style.height  = '1px';  
      
    // slide down events  
    slideMenu.Registry[id]['containerObj'].onmouseover = function() { slideMenu.showMenu(id); }  
    slideMenu.Registry[id]['containerObj'].onfocus     = function() { slideMenu.showMenu(id); }  
      
    // slide up events  
    slideMenu.Registry[id]['containerObj'].onmouseout  = function() { slideMenu.hideMenu(id); }  
    slideMenu.Registry[id]['containerObj'].onblur      = function() { slideMenu.hideMenu(id); }  
}  
 
slideMenu.showMenu = function(id) {  
    clearInterval(slideMenu.Registry[id]['interval']);  
          
    slideMenu.Registry[id]['contentObj'].style.display = 'block';  
    slideMenu.Registry[id]['contentObj'].style.zIndex += 10;  
      
    slideMenu.Registry[id]['interval'] = window.setInterval("slideMenu.slideDown('"+id+"')",1);  
}  
 
slideMenu.hideMenu = function(id) {  
    clearInterval(slideMenu.Registry[id]['interval']);  
      
    slideMenu.Registry[id]['contentObj'].style.zIndex = 10;  
    slideMenu.Registry[id]['interval'] = window.setInterval("slideMenu.slideUp('"+id+"')",1);  
}  
 
slideMenu.slideDown = function(id) {  
    for(var i=0;i<15;i++) {  
        if(slideMenu.Registry[id]['height'] >= slideMenu.Registry[id]['maxHeight']) {  
            clearInterval(slideMenu.Registry[id]['interval']);  
        } else {  
            slideMenu.Registry[id]['contentObj'].style.height = slideMenu.Registry[id]['height']+'px';  
            slideMenu.Registry[id]['height'] ++;  
        }  
    }  
}  
 
slideMenu.slideUp = function(id) {  
    for(var i=0;i<15;i++) {  
        if(slideMenu.Registry[id]['height'] <= 1) {  
            clearInterval(slideMenu.Registry[id]['interval']);  
            slideMenu.Registry[id]['contentObj'].style.display = 'none';  
        } else {  
            slideMenu.Registry[id]['contentObj'].style.height = slideMenu.Registry[id]['height']+'px';  
            slideMenu.Registry[id]['height'] --;  
        }  
    }  
} 
 
 
</script> 
<title>Pagina nueva 1</title> 
</head> 
 
<body> 
 
 
<SCRIPT type=text/javascript> 
//<![CDATA[ 
function addLoadEvent(func) { 
var oldonload = window.onload; 
if(typeof window.onload != 'function') { 
window.onload = func; 
} else { 
window.onload = function() {  
oldonload(); 
func(); 
} 
} 
} 
 
function loadMenu() { 
var menu2 = new slideMenu("menu2",5); 
var menu3 = new slideMenu("menu3",6); 
var menu4 = new slideMenu("menu4",1); 
var menu5 = new slideMenu("menu5",1); 
} 
addLoadEvent(loadMenu); 
//addLoadEvent(externalLink); 
slideMenu.lineHeight = 24; 
//]]> 
</SCRIPT> 
 
 
 
</body> 
 
</html>

Pero da error en la linea

Código:

slideMenu.Registry[id]['containerObj'] = document.getElementById(id+"Container");

, evidentemente no hay elementos con ese ID.

¿No te faltan capas DIV, o algo asi con esos ID?

sintesk7 · #9 (**permalink**) 15/09/2005, 19:55

si, depués están los items del menu en los divs:

Código HTML:

 <ul id="nav">

<li id="menu1Container"><span><a href="" title="Inicio" >Inicio</a></span></li>

<li id="menu2Container"><span><a href="" title="menu2" accesskey="1">menu2</a></span>
      <ul id="menu2Content">
  	  <li><span><a href="">submenu2.1</a></span></li>
	  <li><span><a href="">submenu2.2</a></span></li>
	        </ul>
    </li>  	 
  </ul>

gracias por todo

derkenuke · #10 (**permalink**) 15/09/2005, 20:53

Jo, sinceramente, no te mereces respuesta... te he tenido que sacar tu pregunta con sacacorchos.. esto no se hace... Intenta mejorar la proxima vez.

Tu codigo resulta un documento que no se ve, hay que modificar el estilo. Ademas al html le faltan elementos del menu segun tu js, asi que los he tenido que añadir manualmente.

Menos mal que el menu tampoco es tan dificil.

Se puede intentar asi:

Código PHP:

  <html>  
 
<head>  
<style>  
 
ul#nav                                { clear: left; position: absolute; top: 160px; list-style-type: none; margin: 0px; padding: 0px; width: 773px; background: #FFF url('../_images/nav_bk.gif'); }  
ul#nav li                            { display: block; float: left; }  
ul#nav li span                        { border-right: 1px solid #000; border-top: 1px solid #000; border-bottom: 1px solid #000; display: block; width: 128px; }  
ul#nav li a                            { line-height: 23px; display: block; width: 128px; color: #000; text-align: center; text-decoration: none; }  
ul#nav li a:hover                    { background-color: #FFF; }  
ul#nav ul                            { margin: 0px; padding: 0px; list-style-type: none; text-align: left; width: 128px; position: absolute;  border: 1px solid #000; overflow: hidden; }  
ul#nav ul li                        { background-color: #FFF; }  
ul#nav ul li span                    { border-right: 0px; border-top: 0px; border-bottom: 1px solid #000; width: 128px; }  
ul#nav ul li span a                    { width: 180px; text-align: left; padding-left: 5px; }  
 
 
</style>  
<script>  
 
slideMenu.Registry = [];  
 
function slideMenu(id,numLines) {  
    slideMenu.Registry[id] = [];  
    slideMenu.Registry[id]['height']       = 1;  
    slideMenu.Registry[id]['containerObj'] = document.getElementById(id+"Container");  
    slideMenu.Registry[id]['contentObj']   = document.getElementById(id+"Content"); 
    slideMenu.Registry[id]['maxHeight']    = new Number((numLines * slideMenu.lineHeight ) );  
    slideMenu.Registry[id]['contentObj'].style.position="relative"; 
    slideMenu.Registry[id]['contentObj'].style.top= -slideMenu.Registry[id]['maxHeight'] - slideMenu.lineHeight*1 +4; 
    slideMenu.Registry[id]['contentObj'].style.display="none"; 
    //slideMenu.Registry[id]['maxHeight']    = (slideMenu.Registry[id]['containerObj'].scrollHeight * numLines) - (numLines - 1);  
    slideMenu.Registry[id]['interval']     = null;  
    slideMenu.Registry[id]['timeout']      = null;  
       
    slideMenu.Registry[id]['contentObj'].style.height  = '1px';  
       
    // slide down events  
    slideMenu.Registry[id]['containerObj'].onmouseover = function() { slideMenu.showMenu(id); }  
    slideMenu.Registry[id]['containerObj'].onfocus     = function() { slideMenu.showMenu(id); }  
       
    // slide up events  
    slideMenu.Registry[id]['containerObj'].onmouseout  = function() { slideMenu.hideMenu(id); }  
    slideMenu.Registry[id]['containerObj'].onblur      = function() { slideMenu.hideMenu(id); }  
}  
 
slideMenu.showMenu = function(id) {  
    clearInterval(slideMenu.Registry[id]['interval']);  
           
    slideMenu.Registry[id]['contentObj'].style.display = 'block';  
    slideMenu.Registry[id]['contentObj'].style.zIndex += 10; 
       
    slideMenu.Registry[id]['interval'] = window.setInterval("slideMenu.slideDown('"+id+"')",1);  
}  
 
slideMenu.hideMenu = function(id) {  
    clearInterval(slideMenu.Registry[id]['interval']);  
       
    slideMenu.Registry[id]['contentObj'].style.zIndex = 10;  
    slideMenu.Registry[id]['interval'] = window.setInterval("slideMenu.slideUp('"+id+"')",1);  
}  
 
slideMenu.slideDown = function(id) {  
    for(var i=0;i<15;i++) {  
        if(slideMenu.Registry[id]['height'] >= slideMenu.Registry[id]['maxHeight']) {  
            clearInterval(slideMenu.Registry[id]['interval']);  
        } else {  
            slideMenu.Registry[id]['contentObj'].style.height = slideMenu.Registry[id]['height']+'px';  
            slideMenu.Registry[id]['height'] +=0.5;  
        }  
    }  
}  
 
slideMenu.slideUp = function(id) {  
    for(var i=0;i<15;i++) {  
        if(slideMenu.Registry[id]['height'] <= 1) {  
            clearInterval(slideMenu.Registry[id]['interval']);  
            slideMenu.Registry[id]['contentObj'].style.display = 'none';  
        } else {  
            slideMenu.Registry[id]['contentObj'].style.height = slideMenu.Registry[id]['height']+'px';  
            slideMenu.Registry[id]['height'] -=0.5;  
        }  
    }  
}  
 
 
</script>  
<title>Inicio</title>  
</head>  
 
<body>  
 
 
<SCRIPT type=text/javascript>  
//<![CDATA[  
function addLoadEvent(func) {  
var oldonload = window.onload;  
if(typeof window.onload != 'function') {  
window.onload = func;  
} else {  
window.onload = function() {  
oldonload();  
func();  
}  
}  
}  
 
function loadMenu() {  
    var menu2 = new slideMenu("menu2",5);  
    var menu3 = new slideMenu("menu3",6);  
    var menu4 = new slideMenu("menu4",1);  
    var menu5 = new slideMenu("menu5",2);  
}  
addLoadEvent(loadMenu);  
//addLoadEvent(externalLink);  
slideMenu.lineHeight = 24;  
//]]>  
</SCRIPT>  
 
 
<ul id="nav"> 
    <li id="menu1Container"><span><a href="" title="Inicio" >Inicio</a></span></li> 
    <li id="menu2Container"><span>menu2</span></li> 
    <ul id="menu2Content"> 
        <li><span><a href="">submenu2.1</a></span></li> 
        <li><span><a href="">submenu2.2</a></span></li> 
        <li><span><a href="">submenu2.3</a></span></li> 
        <li><span><a href="">submenu2.4</a></span></li> 
        <li><span><a href="">submenu2.5</a></span></li> 
    </ul> 
    <li id="menu3Container"><span>menu3</span></li> 
    <ul id="menu3Content"> 
        <li><span><a href="">submenu3.1</a></span></li> 
        <li><span><a href="">submenu3.2</a></span></li>         
        <li><span><a href="">submenu3.3</a></span></li> 
        <li><span><a href="">submenu3.4</a></span></li>         
        <li><span><a href="">submenu3.5</a></span></li> 
        <li><span><a href="">submenu3.6</a></span></li> 
    </ul>   
    <li id="menu4Container"><span>menu4</span></li> 
    <ul id="menu4Content"> 
        <li><span><a href="">submenu4.1</a></span></li> 
    </ul>  
    <li id="menu5Container"><span>menu5</span></li> 
    <ul id="menu5Content"> 
        <li><span><a href="">submenu5.1</a></span></li> 
        <li><span><a href="">submenu5.2</a></span></li> 
    </ul>  
</ul> 
 
 
</body>  
 
</html>

Si kieres que salga de abajo a arriba no podras hacerlo con la propiedad height, podrias hacer un apaño con la posicion relativa, o si no mucho mas profesional, con un clip.

derkenuke · #11 (**permalink**) 15/09/2005, 21:01

Bueno sin clip, cambiandole de posicion; y chapucero, pero no creo que merezca esforzarme mas que lo que tu te has esforzado:

Código PHP:

  <html>  
 
<head>  
<style>  
 
ul#nav                                { clear: left; position: absolute; top: 160px; list-style-type: none; margin: 0px; padding: 0px; width: 773px; background: #FFF url('../_images/nav_bk.gif'); }  
ul#nav li                            { display: block; float: left; }  
ul#nav li span                        { border-right: 1px solid #000; border-top: 1px solid #000; border-bottom: 1px solid #000; display: block; width: 128px; }  
ul#nav li a                            { line-height: 23px; display: block; width: 128px; color: #000; text-align: center; text-decoration: none; }  
ul#nav li a:hover                    { background-color: #FFF; }  
ul#nav ul                            { margin: 0px; padding: 0px; list-style-type: none; text-align: left; width: 128px; position: absolute;  border: 1px solid #000; overflow: hidden; }  
ul#nav ul li                        { background-color: #FFF; }  
ul#nav ul li span                    { border-right: 0px; border-top: 0px; border-bottom: 1px solid #000; width: 128px; }  
ul#nav ul li span a                    { width: 180px; text-align: left; padding-left: 5px; }  
 
 
</style>  
<script>  
 
slideMenu.Registry = [];  
 
function slideMenu(id,numLines) {  
    slideMenu.Registry[id] = [];  
    slideMenu.Registry[id]['height']       = 1;  
    slideMenu.Registry[id]['containerObj'] = document.getElementById(id+"Container");  
    slideMenu.Registry[id]['contentObj']   = document.getElementById(id+"Content"); 
    slideMenu.Registry[id]['maxHeight']    = new Number((numLines * slideMenu.lineHeight ) );  
    slideMenu.Registry[id]['contentObj'].style.position="relative"; 
    slideMenu.Registry[id]['maxSubir']= -slideMenu.Registry[id]['maxHeight'] - slideMenu.lineHeight*1 +4; 
    slideMenu.Registry[id]['minSubir']= -slideMenu.lineHeight*1 +4; 
    slideMenu.Registry[id]['subido']= slideMenu.Registry[id]['minSubir']; 
    slideMenu.Registry[id]['contentObj'].style.top= slideMenu.Registry[id]['minSubir']+"px"; 
     
    slideMenu.Registry[id]['contentObj'].style.display="none"; 
    slideMenu.Registry[id]['interval']     = null;  
    slideMenu.Registry[id]['timeout']      = null;  
       
    slideMenu.Registry[id]['contentObj'].style.height  = '1px';  
       
    // slide down events  
    slideMenu.Registry[id]['containerObj'].onmouseover = function() { slideMenu.showMenu(id); }  
    slideMenu.Registry[id]['containerObj'].onfocus     = function() { slideMenu.showMenu(id); }  
       
    // slide up events  
    slideMenu.Registry[id]['containerObj'].onmouseout  = function() { slideMenu.hideMenu(id); }  
    slideMenu.Registry[id]['containerObj'].onblur      = function() { slideMenu.hideMenu(id); }  
}  
 
slideMenu.showMenu = function(id) {  
    clearInterval(slideMenu.Registry[id]['interval']);  
           
    slideMenu.Registry[id]['contentObj'].style.display = 'block';  
    slideMenu.Registry[id]['contentObj'].style.zIndex += 10; 
       
    slideMenu.Registry[id]['interval'] = window.setInterval("slideMenu.slideDown('"+id+"')",1);  
}  
 
slideMenu.hideMenu = function(id) {  
    clearInterval(slideMenu.Registry[id]['interval']);  
       
    slideMenu.Registry[id]['contentObj'].style.zIndex = 10;  
    slideMenu.Registry[id]['interval'] = window.setInterval("slideMenu.slideUp('"+id+"')",1);  
}  
 
slideMenu.slideDown = function(id) {  
    for(var i=0;i<15;i++) {  
        if( slideMenu.Registry[id]['subido'] <= slideMenu.Registry[id]['maxSubir']) {  
            clearInterval(slideMenu.Registry[id]['interval']);  
        } else {  
            slideMenu.Registry[id]['contentObj'].style.height = slideMenu.Registry[id]['height']+'px';  
            slideMenu.Registry[id]['height'] +=0.5;  
            slideMenu.Registry[id]['contentObj'].style.top = slideMenu.Registry[id]['subido']+'px'; 
            slideMenu.Registry[id]['subido'] -=0.5; 
        }  
    }  
}  
 
slideMenu.slideUp = function(id) {  
    for(var i=0;i<15;i++) {  
        if( slideMenu.Registry[id]['subido'] >= slideMenu.Registry[id]['minSubir']) {  
            clearInterval(slideMenu.Registry[id]['interval']);  
            slideMenu.Registry[id]['contentObj'].style.display = 'none';  
        } else {  
            slideMenu.Registry[id]['contentObj'].style.height = slideMenu.Registry[id]['height']+'px';  
            slideMenu.Registry[id]['height'] -=0.5;  
            slideMenu.Registry[id]['contentObj'].style.top = slideMenu.Registry[id]['subido']+'px'; 
            slideMenu.Registry[id]['subido'] +=0.5; 
        }  
    }  
}  
 
 
</script>  
<title>Inicio</title>  
</head>  
 
<body>  
 
 
<SCRIPT type=text/javascript>  
//<![CDATA[  
function addLoadEvent(func) {  
var oldonload = window.onload;  
if(typeof window.onload != 'function') {  
window.onload = func;  
} else {  
window.onload = function() {  
oldonload();  
func();  
}  
}  
}  
 
function loadMenu() {  
    var menu2 = new slideMenu("menu2",5);  
    var menu3 = new slideMenu("menu3",6);  
    var menu4 = new slideMenu("menu4",1);  
    var menu5 = new slideMenu("menu5",2);  
}  
addLoadEvent(loadMenu);  
//addLoadEvent(externalLink);  
slideMenu.lineHeight = 24;  
//]]>  
</SCRIPT>  
 
 
<ul id="nav"> 
    <li id="menu1Container"><span><a href="" title="Inicio" >Inicio</a></span></li> 
    <li id="menu2Container"><span>menu2</span></li> 
    <ul id="menu2Content"> 
        <li><span><a href="">submenu2.1</a></span></li> 
        <li><span><a href="">submenu2.2</a></span></li> 
        <li><span><a href="">submenu2.3</a></span></li> 
        <li><span><a href="">submenu2.4</a></span></li> 
        <li><span><a href="">submenu2.5</a></span></li> 
    </ul> 
    <li id="menu3Container"><span>menu3</span></li> 
    <ul id="menu3Content"> 
        <li><span><a href="">submenu3.1</a></span></li> 
        <li><span><a href="">submenu3.2</a></span></li>         
        <li><span><a href="">submenu3.3</a></span></li> 
        <li><span><a href="">submenu3.4</a></span></li>         
        <li><span><a href="">submenu3.5</a></span></li> 
        <li><span><a href="">submenu3.6</a></span></li> 
    </ul>   
    <li id="menu4Container"><span>menu4</span></li> 
    <ul id="menu4Content"> 
        <li><span><a href="">submenu4.1</a></span></li> 
    </ul>  
    <li id="menu5Container"><span>menu5</span></li> 
    <ul id="menu5Content"> 
        <li><span><a href="">submenu5.1</a></span></li> 
        <li><span><a href="">submenu5.2</a></span></li> 
    </ul>  
</ul> 
 
 
</body>  
 
</html>

*EDITO: Ah, se me olvidaba, es un codigo que no funciona ni en Firefox ni en Opera por lo que he podido comprobar. Lo has hecho tu? No lo creo... pero el menu realmente bueno debe funcionar en los 3 navegadores, o por lo menos algun navegador que soporte los estandares, para acostumbrarnos a los que es, y no lo que dice M$ que sea...

sintesk7 · #12 (**permalink**) 15/09/2005, 21:38

Mis más sinceras disculpas, no quería causar la impresión de que posteo por postear y a ver si alguien me hace el trabajo.

Tienes razón en que me has tenido que sacar el código con sacacorchos (mil perdones!) pero es que creía que lo que se tenía que cambiar era algún parámetro del js que puse en el primer post, pues no tengo ni idea de javascript (aciertas en lo de que el código no es mío, hasta ahora sólo programaba aplicaciones web, sin formato, en php y mysql).

Espero que te sirva mi explicación,

Gracias por haberme ayudado
Saludos