Maintenant que le CSS est fait, nous allons passer au Javascript, le plus
compliqué intéressant.
Commençons par créer un fichier Javascript.
Faites simplement un fichier nommé "
menu.js".
N'oubliez pas d'inclure le fichier javascript au xHTML.
Ajoutez simplement ceci entre les balises
<head> et
</head> :
Code : HTML | <script type="text/javascript" src="menu.js"></script>
|
Changez bien sûr le nom du fichier pour le nom du vôtre.
Normalement, vous ne verrez pas de modification de votre menu étant donné que le fichier est vide.
Bon, maintenant, passons au contenu du fichier.
Nous allons commencer par créer les variables principales.
Code : JavaScript | var decalage = 0;
var nbBout;
var timer;
|
J'expliquerai ces variables quand nous les utiliserons.
Maintenant, la fonction principale : elle permet de créer le menu au chargement de la page.
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 | function menu(nb)
{
var angle = 360 / nb;
nbBout = nb;
var posX;
var posY;
var rayon = 60;
var centreX = document.getElementById("centre").offsetLeft;
var centreY = document.getElementById("centre").offsetTop;
var lItem = 20;
var i = 1;
var item;
var b;
for(b = 0; b < 360; b += angle)
{
posX = centreX + 25 + rayon * Math.cos(b * Math.PI / 180);
posY = centreY + 25 + rayon * Math.sin(b * Math.PI / 180);
item = document.getElementById("item" + i);
item.className = "item";
item.style.top = (posY - lItem / 2) + "px";
item.style.left = (posX - lItem / 2) + "px";
i++;
}
}
|
Je vais maintenant expliquer ce code, qui peut sembler compliqué à première vue.
Commençons par le paramètre : c'est en fait le nombre de boutons de votre menu, cela sert à diviser 360, l'angle d'un cercle, par le nombre de boutons.
La variable
angle est donc l'angle entre deux boutons.
nbBout prend alors le nombre de boutons du menu, cela permet de rendre le nombre de boutons "public", je veux dire par là que toutes les fonctions pourront l'utiliser.
Les variables
posX et
posY sont utilisées pour déclarer la position du bouton.
Vous comprendrez par la suite.
La variable
rayon, c'est la distance en pixels entre le centre du cercle et le bouton ; j'ai mis 60, mais vous pouvez mettre plus si vous avez plus de boutons.
centreX et
centreY sont égales aux positions du
div centre.
La valeur de
lItem est la largeur et la hauteur des boutons.
Pour le moment, ça fonctionne comme ça mais nous verrons une autre solution plus tard.
La variable
i sert pour les boucles, c'est un peu ma variable passe-partout, nous l'utilisons pour le numéro du bouton.
Passons à la boucle maintenant.
Nous faisons tourner la boucle jusqu'au moment où l'angle total est de 360°.
Les deux lignes suivantes sont les plus compliquées, non pas au niveau programmation mais plutôt au niveau mathématique :
Code : JavaScript | posX = centreX + 25 + rayon * Math.cos(b * Math.PI / 180);
posY = centreY + 25 + rayon * Math.sin(b * Math.PI / 180);
|
Eh oui, c'est de la trigonométrie.
La variable
posX est égale à la position du centre plus 25, la largeur du
div central divisé par deux.
En Javascript, pour utiliser des fonctions mathématiques, nous utilisons un objet, il est nommé
Math ; cet objet regroupe des variables telles que la valeur de pi, les fonctions telles que cosinus, sinus, ...
Toutes les fonctions utiles pour les mathématiques, quoi.
Nous utilisons ici cosinus, abréviation cos ; si vous connaissez un peu le cercle trigonométrique, vous savez que la position du point sur X est égale à cos ("l'angle").
Cependant, la fonction
cos de Javascript prend l'angle en radians et non en degrés, c'est pourquoi nous utilisons
Math.PI, qui fourni la valeur de Pi, qui peut aussi être remplacée par 3,14, le tout divisé par 180.
Nous faisons la même chose pour la deuxième ligne sauf que la fonction est
sin, pour sinus.
Pour les matheux, voici la formule mathématique de ces lignes :
Enfin bon, si vous trouvez que ces lignes sont compliquées, ne vous en préoccupez pas, elles sont les plus importantes certes, mais vous ne devez pas spécialement savoir comment ça fonctionne pour que ça fonctionne.
Au pire, si vous êtes têtus, comme moi, vous pouvez me demander des explications par message privé.
La variable
item est égale à l'item qui va être placé aux positions
posX et
posY.
La ligne suivante permet de mettre
class="item" au bouton.
Voilà, pour que vos boutons soient placés autour du centre, vous devez modifier la balise
body comme suit :
Code : HTML
Cela permet d'exécuter la fonction
menu au chargement de la page.
Si vous essayez, vos boutons seront immobiles mais disposés autour du centre.
L'animation maintenant...
Nous allons maintenant passer à l'animation qui changera tout.
La fonction suivante est très ressemblante à la fonction
menu(), je ne vais donc pas l'expliquer en profondeur.
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 | function anim()
{
decalage++;
var angle = 360 / nbBout;
var posX;
var posY;
var rayon = 70;
var centreX = document.getElementById("centre").offsetLeft;
var centreY = document.getElementById("centre").offsetTop;
var lCentre = 50;
var lItem = 20;
var i = 1;
var item
var b;
for(b = 0; b < 360; b = b + angle)
{
posX = centreX + 25 + rayon * Math.cos((b + decalage) * Math.PI / 180);
posY = centreY + 25 + rayon * Math.sin((b + decalage) * Math.PI / 180);
item = document.getElementById("item" + i);
item.style.top = (posY - lItem / 2) + "px";
item.style.left = (posX - lItem / 2) + "px";
i++;
}
}
|
Le seul changement, c'est l'utilisation de la variable
c. Cette variable sert en fait à décaler les boutons par rapport à la valeur de
c.
La variable
decalage prend 1 en plus à chaque passage de la fonction.
Vous verrez pourquoi par la suite.
Si vous essayez maintenant, vous n'aurez pas de changements par rapport à la dernière fois.
Vous devez en fait ajouter cette ligne à la fin de votre fichier :
Code : JavaScript | timer = setInterval("anim()",50);
|
Cette ligne permet de démarrer la fonction
anim() toutes les 50 millisecondes.
Ça paraît rapide, je sais, mais un degré, c'est tout petit.
Pour modifier la vitesse de rotation du menu, vous devez modifier la valeur du deuxième paramètre.
Plus le nombre est grand, plus le menu tournera lentement.
Voilà : votre menu tourne maintenant, admettez que ça ajoute du dynamisme au site, non ?
Bon, c'est vrai qu'il tourne mais il n'est pas simple de cliquer sur un bouton en mouvement.
Dans la partie "Améliorations sympas", j'explique comment arrêter les boutons au passage de la souris.
Créer un menu circulaire
Durée d'étude :
30
minutes
gp2mv3
Trouvez une formation
Suggestions
Flux RSS News
Facebook
Google+