Como se hace ...

Alexiel · #1 (**permalink**) 03/01/2004, 04:28

... lo que tiene el windows xp en cada carpeta, en lo de "tareas de archivo y carpeta", etc; en el que clickas obre una imagen y se extiende el menu, clickas de nuevo y se encoge?

tunait · #2 (**permalink**) 03/01/2004, 08:27

Qué tal,

eso se hace con css usando javascript para alterar los valores css ante eventos de ratón.

Traslado el tema al foro de javascript

movido desde html

un saludo

Alexiel · #3 (**permalink**) 05/01/2004, 02:16

Que no se pierda ... que quiero una respuesta .... :S

KarlanKas · #4 (**permalink**) 05/01/2004, 06:40

Prueba a ver con este código. Si no lo entiendes o si no sabes como adaptarlo a tu sitio dímelo.

Un saludo!!

Código PHP:

  <html> 
<head> 
    <title>Untitled</title> 
     
</head> 
 
<body> 
 
<script> 
 
    //VARIABLES INICIALES 
    alturaInicial=30; 
     
    var finale=alturaInicial; 
    var vamosPor=alturaInicial; 
    var incremento=-3; 
    var opcionMenu=[]; 
    var Menus=[]; 
    var destinoMenu=[]; 
    var textoMenu=[]; 
    var imagenMenu=[]; 
    //GENERADOR DE OPCIONES     
    function lineaDeMenu(imagen,texto,destino){ 
    this.imagen=imagen; 
    this.texto=texto; 
    this.destino=destino; 
    } 
     
    //INTRODUCE AQUÍ TODAS LAS OPCIONES QUE QUIERAS  
    //poniendo primero la ruta a la imagen, luego el texto y por fín  
    //el destino del enlace 
     
    Menus[0]=new lineaDeMenu("http://www.karlankas.net/chufa2.jpg","Pincha para ver las opciones","#") 
    Menus[1]=new lineaDeMenu("http://www.karlankas.net/transmutado.jpg","Maestros del Web","http://www.maestrosdelweb.com") 
    Menus[2]=new lineaDeMenu("http://www.karlankas.net/transmutado.jpg","Foros del Web","http://www.forosdelweb.com") 
    Menus[3]=new lineaDeMenu("http://www.karlankas.net/transmutado.jpg","FAQs del Web","http://www.faqsdelweb.com") 
     
     
    inicial=Menus.length*(alturaInicial+4); 
     
     
    //CREAMOS LA CAPA DEL MENU 
     
    var    menu =     document.createElement("div"); 
                menu.style.height=alturaInicial+"px"; 
                menu.style.overflow="hidden"; 
                menu.style.border="solid 1px silver"; 
                menu.style.width="210px"; 
 
 
    //MONTADOR DE OPCIONES 
     
    for (a=0;a<Menus.length;a++){ 
     
 
     
    textoMenu[a] =    document.createTextNode(" "+Menus[a].texto); 
    imagenMenu[a] =    document.createElement('img'); 
    opcionMenu[a] = document.createElement("a"); 
 
    //Atributos de los enlaces 
     
    opcionMenu[a].setAttribute("href",Menus[a].destino); 
     
    //Atributos de las imágenes 
    imagenMenu[a].setAttribute("src",Menus[a].imagen); 
    imagenMenu[a].setAttribute("height",alturaInicial); //forzar la altura de las imágenes 
    imagenMenu[a].setAttribute("width",alturaInicial); //forzar la anchura de las imágenes 
    imagenMenu[a].setAttribute("border",0); 
    imagenMenu[a].setAttribute("align","middle"); 
     
    //ESTILO DE LAS OPCIONES     
    opcionMenu[a].style.font="normal 10px/10px verdana"; 
    opcionMenu[a].style.color="black"; 
    opcionMenu[a].style.display="block"; 
    opcionMenu[a].style.textDecoration="none"; 
    opcionMenu[a].style.marginBottom="5px"; 
     
         
    opcionMenu[a].appendChild(imagenMenu[a]); 
    opcionMenu[a].appendChild(textoMenu[a]); 
    menu.appendChild(opcionMenu[a]); 
    } 
    // FIN DE CREADOR DE OPCIONES 
     
    document.body.appendChild(menu); 
     
// MOVEDOR DEL MENU 
     
    menu.onclick= function(){ 
     
    temporal=finale; 
    finale=inicial; 
    inicial=temporal; 
    incremento*=-1; 
    variable=(incremento<0)?">=":"<="; 
    pepe=setInterval("abrir()",20); 
    } 
    function abrir(){ 
    eval("verdad=(vamosPor"+variable+"finale)"); 
    if(verdad){ 
    vamosPor+=incremento; 
    menu.style.height=vamosPor+"px"; 
    } 
    else{ 
    window.clearInterval(pepe); 
 
    } 
    } 
</script> 
</body> 
</html>