Ce que vous pourrez réaliser
Mise en place sur votre page web
La mise en place de cette animation requiet 4 éléments :
- Votre page HTML5 (évident),
- une feuille de style CSS, nommée pour l'exemple "movemenu.css", ici indépendante mais dont le code peut très bien etre incorporé directement dans votre page HTML
- Une feuille Javascript, nommée pour l'exemple "movemenu.js"
- Le fichier JQuery.js, ici en version 1.8.2.min (l'animation fonctionne aussi avec une version JQuery antérieure)
Le design de l'exemple reste très impersonnel, à vous de mettre en marche vos compétence en matière de CSS pour lui donner le style recherché. Ce fichier est simple à décrypter, vous n'aurez que peut de mal à donner une ame à ce menu.
Integration dans votre page
Voici le code source de l'exemple présent plus haut :
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8">
<title>Animez vos menus</title>
<!--On appelle la feuille de style CSS-->
<link href="movemenu.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="site">
<conteneur1>
<h1>Animer votre menu</h1>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Le HTML5</a></li>
<li><a href="#">Le CSS3</a></li>
<li><a href="#">Le PHP</a></li>
<li><a href="#">Le Javascript</a></li>
<li><a href="#">Application JQuery</a></li>
<li><a href="#">Se referencer</a></li>
</ul>
</nav>
</conteneur1>
</div>
<!--On appelle JQuery-->
<script src="jquery-1.8.2.min.js"></script>
<!--On appelle le fichier Javascript-->
<script src="movemenu.js"></script>
</body>
</html>
Voici le code Javascript associé :
function movemenu() {
$("li a").each(function(i) {
var a = $(this);
var title = a.html();
var w = a.outerWidth();
a.append("<span class='mask' style='width: 0; display: none;'>"+title+"</span>");
var span = a.find("span");
a.hover(function(){
span.stop(true,true);
span.show().animate({
width: w+'px'
}, 200);
}, function() {
span.animate({
width: '0px'
}, 400, function(){
span.hide();
});
});
});
}
$(document).ready(function(){
movemenu();
});
return {
movemenu:movemenu
}
}();
Et le code CSS régissant le style de ce menu :
body {
background: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #1a1a1a;
text-align: center;
line-height: 1;
}
#site {
width: 500px;
height:230px;
margin: auto;
text-align: left;
}
conteneur1 {
background: #ccc;
padding: 20px;
margin: 0 0 10px 0;
display:block;
}
h1 {
font-size: 22px;
line-height: 25px;
margin: 0 0 25px 0;
}
ul {
font-size: 12px;
line-height: 14px;
margin: 0 0 10px 0;
}
li {
padding:3px;
}
nav {
display:block;
}
nav ul {
text-transform: uppercase;
font-size: 17px;
line-height: 17px;
margin: 0;
}
nav li {
height: 19px;
list-style-type: none;
overflow: hidden;
}
nav a, nav a:hover {
display: inline-block;
color: #000;
background: #fff;
padding: 3px 2px 1px 2px;
position: relative;
overflow: hidden;
text-decoration: none;
*display: inline;
*padding: 2px;
zoom: 1;
}
nav span {
position: absolute;
left: 0;
top: 0;
display: block;
color: #fff;
background: #000;
padding: 3px 2px 1px 2px;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
*padding: 2px;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
nav a, nav a:hover, nav span {
padding: 2px;
}
}
nav .current a {
background: #000;
color: #fff;
}
nav .current span {
display: none !important;
}
Et pour finir, voici le lien pour télécharger la version de JQuery utilisé dans cette exemple :
| Sur le site officiel : |
| sur ce site |
Pour ceux qui le souhaitent, vous pouvez telecharger directement l'ensemble des fichiers HTML5, CSS et JS
| de cet exemple en cliquant sur le bouton suivant |