Menu con CSS imitando Mootools

Tweet

Redactando la entrada de ayer, se me ocurrió que, con ligeros cambios en el código CSS y modificando las imágenes, podría realizar el efecto acordeón tan típico de la librería Mootools.

Este es el resultado

Este es el código CSS que debéis poner antes de ]]skin

#Etique1 a:link, #Etique1 a:visited {

margin: 0px 0px 20px 0px;

display: block;

width: 40px;

background: transparent url('URL IMAGEN 1') 0px 0px no-repeat;

padding: 8px 0 0 10px;

text-decoration: none;

}

#Etique1 a:hover {

background: transparent url('URL IMAGEN 1') -80px 0px no-repeat;

padding: 8px 0 0 30px;

}

#Etique2 a:link, #Etique2 a:visited {

margin: 0px 0px 20px 0px;

display: block;

width: 40px;

background: transparent url('URL IMAGEN 2') 0px 0px no-repeat;

padding: 8px 0 0 10px;

text-decoration: none;

}

#Etique2 a:hover {

background: transparent url('URL IMAGEN 2') -80px 0px no-repeat;

padding: 8px 0 0 30px;

}

#Etique3 a:link, #Etique3 a:visited {

margin: 0px 0px 20px 0px;

display: block;

width: 40px;;

background: transparent url('URL IMAGEN 3') 0px 0px no-repeat;

padding: 8px 0 0 10px;

text-decoration: none;

}

#Etique3 a:hover {

background: transparent url('URL IMAGEN 3') -80px 0px no-repeat;

padding: 8px 0 0 30px;

}

#Etique4 a:link, #Etique4 a:visited {

margin: 0px 0px 20px 0px;

display: block;

width: 40px;

background: transparent url('URL IMAGEN 4') 0px 0px no-repeat;

padding: 8px 0 0 10px;

text-decoration: none;

}

#Etique4 a:hover {

background: transparent url('URL IMAGEN 4') -80px 0px no-repeat;

padding: 8px 0 0 30px;

}

#Etique5 a:link, #Etique5 a:visited {

margin: 0px 0px 20px 0px;

display: block;

width: 40px;

background: transparent url('URL IMAGEN 5') 0px 0px no-repeat;

padding: 8px 0 0 10px;

text-decoration: none;

}

#Etique5 a:hover {

background: transparent url('URL IMAGEN 5') -80px 0px no-repeat;

padding: 8px 0 0 30px;

}

#menu {

list-style:none;

margin:0;

padding:0;

display: block;

}

#menu li {

padding:0;

float:left;

}

#menu li a {

display:block;

width:115px;

height:85px;

}

#menu li a:hover{

display:block;

width:115px;

height:85px;

}

Las imágenes que he creado para el menú son de 195x84 pixeles.

Para insertarlo en vuestro blog, añadís un elemento HTML y pegáis

<ul id="menu">

<li id="Etique1">

<a href="URL ASIGNADA A LA QUE IREMOS PULSANDO LA IMAGEN 1"></a>

</li>

<li id="Etique2">

<a href="URL ASIGNADA A LA QUE IREMOS PULSANDO LA IMAGEN 2"></a>

</li>

<li id="Etique3">

<a href="URL ASIGNADA A LA QUE IREMOS PULSANDO LA IMAGEN 3"></a>

</li>

<li id="Etique4">

<a href="URL ASIGNADA A LA QUE IREMOS PULSANDO LA IMAGEN 4"></a>

</li>

<li id="Etique5">

<a href="URL ASIGNADA A LA QUE IREMOS PULSANDO LA IMAGEN 5"></a>

</li></ul>

►Download Imágenes

Te recomendamos también

+ Artículos relacionados de Tutorial