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>