Menú horizontal con imagen al pasar el mouse

En este artículo vamos a programar desde 0 un menú horizontal que al hacer hover o pasar el ratón por encima del elemento del menú aparezca un imagen por encima que aparentemente no está visible empleando para ello jQuery.

El contenido HTML del menú deberá ser tan simple como el siguiente  ejemplo (una lista de elementos):

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Ahora añadiremos un poco de maquetación simple al menú en la hoja de estilos que utilices:

#menu {
    float:left;
    width:100%;
    height:40px;
    background-color:#003399;
    z-index:9999;
    margin-top:40px;
}

#menu li {
    float:left;
    list-style:none;
    height:40px;
    position:relative;
    text-align:center;
}

#menu li a {
    background-color: #003399;
    color: #FFFFFF;
    float: left;
    height: 30px;
    overflow: hidden;
    padding: 5px 10px;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index: 1;
}
#menu li a:hover {
    color:#003399;
    background-color: #999999;
    text-decoration:none;
}

#menu li img {
    bottom:0px;
    left:0px;
    position: absolute;
    z-index:0;
}

Y ahora faltaría hablar de la parte clave o más interesante del asunto. Realizar el efecto de que al pasar el ratón por encima de uno de los elementos del menú, aparezca una imagen que aparentemente está escondida.

En la cabecera de la página que estés utilizando deberás añadir la librería jQuery + el script que realiza la operación:

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function() {
    $('#menu li').hover(function(){
        $(this).find('img').animate({bottom:'35px'},{queue:false,duration:500});
    }, function(){
        $(this).find('img').animate({bottom:'0px'},{queue:false,duration:500});
    });
    
    $.each($('#menu li'), function(i, l){
        if (i == 0)
               $(this).append('<img src="grey.jpg" />');
        else
            $(this).append('<img src="taza.png" />');
    });
});
</script>

En la primera parte del código tenemos la aplicación del efecto al hacer hover con el ratón, utilizando la función animate que con los parámetros que le hemos pasado lo que conseguimos es subir la imagen a 35px de su posición con una duración de medio segundo. Al sacar el ratón, se devuelve la imagen a su posición original. Fíjate en los estilos de las imágenes que están sutuadas a bottom:0px.

En la segunda parte del código estamos añadiendo algo de lógica al menú mediante un bucle. Es ampliable ya que en este caso tan solo estamos añadiendo a cada elemento del menú una imagen.  Estamos iterando todos los li del menú y para el primer elemento le estamos añadiendo una imagen asociada con el nombre «grey.jpg» y para el resto «taza.png».

Podrás ver el efecto en el ejemplo en funcionamiento