Índice

Aplicaciones

1. Un menú desplazado

Vamos a crear un menú de navegación interactivo. Los elementos del menú se desplazarán hacia la derecha al pasar por encima el cursor del ratón.

El menú de navegación inicial:

images/5_4_1_v41.png

Al pasar el ratón por encima de un ítem del menú de navegación, este se va a desplazar a la derecha:

images/5_4_1_v42.png

El documento HTML:

<!doctype html> 
<html lang="es"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery</title> 
<script src="jquery.js"></script> 
<script> 
    $(document).ready(function() { 
        $(’ul#menu li a’).hover(function() { 
            $(this).stop().animate( { paddingLeft:"50px" }, 400 ); 
        }, 
        function() { 
            $(this).stop().animate( { paddingLeft:"0" }, 200 ) 
        }) 
    }); 
</script> 
<style> 
    nav ul { 
        list-style: none; 
        padding: 0px; 
        margin: 0px; 
    }  
    nav li a { 
        display: block; 
        height: 25px; 
        line-height: ...