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>