Applications
1. Un menu décalé
Nous allons créer un menu de navigation interactif. Les élements du menu seront décalés vers la droite au survol du curseur de la souris.
Le menu de navigation initial :
Au survol d’un item du menu de navigation, celui-ci se déplace vers la droite :
Le document HTML :
<!doctype html>
<html lang="fr">
<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 {
...
Conditions générales d'utilisationCopyright - © Editions ENI ||Politique de protection des données du groupe ENI