Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > Javascript > Créer un menu circulaire > Lecture des commentaires

Créer un menu circulaire

Vous devez être inscrit pour pouvoir poster des messages

Page : 1 
Pseudo Commentaire
Page : 1 
Hors ligne KWHc_ # Posté le 27/05/2008 à 10:00:00 - Ce membre n'a pas mis de note
Määsk !
Avatar
Groupe : Membres
 Encore une fois, un tuto soit-disant zCorrigé avec pas mal de fautes...

La mention des zCorrecteurs ne vaudrait-elle finalement rien ?!

Bref sinon bon sujet de tuto, j'ai survolé ça rapidement ;)
Je vends suite pour graphistes Microsoft Expression Studio totalement neuve à très bas prix !
MP pour plus d'infos !

"Membre du SdZ de père en fils depuis 2005" :soleil:

"L'important, c'est pas la chute, c'est l'atterrissage."

Mon blog photo/graphisme/pochoirs

 
Hors ligne bbsebb # Posté le 27/05/2008 à 10:36:04 - Ce membre a mis la note : 15
Avatar
Groupe : Membres
 Bon tuto sur une application des cours, il manque un exemple sur un page web pour voir réellement ce que cela donne avant de se lancer !
Hors ligne french-petzouille # Posté le 27/05/2008 à 11:40:02 - Ce membre n'a pas mis de note
Avatar
Groupe : Membres
 Dommage qu'aucun exemple ne soit mis. On a pas forcement envie de créer une page perso pour voir ce que cela peut donner.
D'où un exemple.
Possible ?
Moi paumé en Lozère ... alors si Toi pas loin et Toi bidouiller en Php et Mysql ... eMail moi ;)
 
Hors ligne koudougou # Posté le 27/05/2008 à 13:07:53 - Ce membre n'a pas mis de note
A quarter pounder with cheese
Avatar
Groupe : Membres
 Fin de la première partie :

[...]. Le script s'en chargera tout seul.


et pas

[...]. Le script s'en chargera seul.


Très bon tuto, vraiment utile. Vraiment vraiment utile.
Le jeu en vaut la chandelle, oui, le jeu en vaut la chandelle.
 
Hors ligne Snip69 # Posté le 27/05/2008 à 18:33:21 - Ce membre a mis la note : 13
Si ca marche pas, tape dessus
Groupe : Membres
 Intéressant, j'aime bien l'idée.
J'ai fait une page pour voir ce que ca donnait, mais un exemple aurait été plus rapide (ou au moins un résumé du code, là il faut se balader dans tout le tuto pour retrouver tout. Je le mettrais en fin de mon commentaire.

Sinon, j'ai pas regardé la programmation de très près, mais j'ai vu de la duplication de code et des choses pas très propres comme ça, surtout pour un langage objet comme le JS.
Si je le met sur mon site, je le réécrirai je pense, mais heureusement que j'ai cette base là.

Les fichiers :
Menu.html :
Code : HTML
 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
27
28
29
30
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Test menu</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="menu.js"></script>

	</head>
	<body onload="menu(5);">
		<h1>
			Test Menu
		</h1>
		<div id="menu" onmouseover="stopanim();" onmouseout="replayanim();">
		 <h2>Menu</h2> 
		 <div id="centre">
		  Centre   
		 </div>

		 <ul>
		  <li id="item1">Menu 1</li>
		  <li id="item2">Menu 2</li>
		  <li id="item3">Menu 3</li>
		  <li id="item4">Menu 4</li>
		  <li id="item5">Menu 5</li> 
		 </ul>
		</div>
	</body>
</html>


style.css :
Code : CSS
 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
27
28
29
30
31
32
enu
{
 width: 170px;
 background-color: #FFFF99; 
 border: 1px solid #000000;
}
 
#menu h2
{
 color: #0000EE;
 text-align: center;
 font-size: 15px;
}

#menu li
{
 list-style-type: none;
 list-style-position: inside;
}

#centre
{
 height: 50px;
 width: 50px;
 margin: auto;
 border: 1px solid #BBBBBB;
}

.item
{
 position: absolute;
}


menu.js :
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
var c = 0;
var nb2;	  
var timer;

function menu(nb)
{
 var a = 360 / nb;		
 nb2 = 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 += a)
 {		  
  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++;
 }
}

function anim()
{		  
 c++;
 var a = 360 / nb2;		
 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 + a)
 {		  
  posX = centreX + 25 + rayon * Math.cos((b + c) * Math.PI / 180);
  posY = centreY + 25 + rayon * Math.sin((b + c) * Math.PI / 180); 
  
  item = document.getElementById("item" + i);
  item.style.top = (posY - lItem / 2) + "px"; 
  item.style.left = (posX - lItem / 2) + "px";
  i++;
 }	
}

timer = setInterval("anim()",50);

function stopanim()
{
 clearInterval(timer);		   
}

function replayanim()
{
 timer = setInterval("anim()",50);
}
By Snip69
Mon blog sur l'Australie :soleil:
 
Hors ligne 0nce # Posté le 28/05/2008 à 10:05:54 - Ce membre a mis la note : 15
Avatar
Groupe : Membres
 Tuto intéressant. Je fais la même remarque que les autres: ça serait bien d'avoir un exemple pour voir ce que ça donne "en vrai" et pas seulement sur une image.
Image utilisateur
tuto : générateur de particules OpenGL
autre site web: galerie photo en PHP/javascript, sans base de données
 
Hors ligne vincent1870 # Posté le 28/05/2008 à 19:18:29 - Ce membre n'a pas mis de note
Avatar
Groupe : Membres
 Super, "Le script s'en chargera seul." est correct que je sache, même si moins élégant ? o_O

Après, citez donc des exemples au lieu de critiquer. Il manque un espace dans l'intro, ok, mais sinon ? J'ai survolé vite fait le tutot, il ne m'a pas l'air vraiment bourré de fautes (je me trompe peut-être, mais sur deux / trois phrases, j'ai rien vu de particulier ;) ).
Image utilisateur

Initiation au modèle MVC, une manière d'organiser son code | Utiliser Talus' TPL, un moteur de templates
 
Hors ligne Sankasssss # Posté le 31/05/2008 à 19:33:33 - Ce membre a mis la note : 19
Avatar
Groupe : Membres
 Il est vrais qu'il est dommage qu'un lien vers son site ne soit pas présent sur sa page :( , mais vu qu'il dit qu'il à fait ca pour un de ses sites :
regarder son profile, lien vers sont blog, liste de tout ses sites et hop on tombe facilement sur notre menu animé :p


Tres bon tuto, merci à toi pour cette source intéressante :soleil:
Hors ligne Nikaulus # Posté le 25/06/2008 à 16:23:19 - Ce membre n'a pas mis de note
Avatar
Groupe : Membres
 Je trouve le code pas très propre et mettre des id a chaque balise li un peu lourd. Ça serait plus intéressant d'utiliser getElementsByTagName ici.

On pourrait l'utiliser pour la boucle qui repositionne chaque li :Code : JavaScript
1
2
3
4
5
6
7
8
menu = document.getElementById('menu');
items = menu.getElementsByTagName('li');
for (i in items)
{
   item = items[i];
  // reste de la boucle ici
  // il faut juste calculer l'angle b
}

On peut aussi faire la fonction menu de cette manière :Code : JavaScript
1
2
3
4
5
6
function menu(id_menu)
{
   menu = document.getElementById(id_menu);
   nb = menu.getElementsByTagName('li').length;
   // suite de la fonction menu
}

Dommage aussi que l'image qui ne bouge pas ne soit pas vraiment centrée.
Hors ligne gp2mv3 # Posté le 25/06/2008 à 16:40:31 - Ce membre n'a pas mis de note
TPNH : Sauvons la planète !
Avatar
Groupe : Membres
 Merci pour tes conseils Nikaulus, je vais les prendre en compte, je vais les modifier maintenant.
Pour les commentaires précédents, à savoir un aperçu réel, je les ai pris en compte.
Je vais aussi ajouter un récapitulatif à la fin comme le conseille Snip69.
Image utilisateur
 
Hors ligne Michacke # Posté le 04/07/2008 à 13:30:24 - Ce membre a mis la note : 15
Je suis l'ombre de moi même !
Avatar
Groupe : Bannis
 Citation : koudougou
Fin de la première partie :
[...]. Le script s'en chargera tout seul.

et pas
[...]. Le script s'en chargera seul.


N'importe quoi, ce n'était pas le peine de poster un commentaire pour ça ... En plus, la sintaxe de la phrase [...] Le script s'en chargera seul est correct et est plus soutenue que [...] Le script s'en chargera tout seul. :-°
Fesons confiance aux Zcorrecteurs, quand même ! :o

Bon, sinon côté tutoriel, bien même si je n'y arrive pas trop o_O :colere2: . Mais c'est un bon tutoriel qui explique bien ;) .

Secret (cliquez pour afficher)
15/20 :)


Cordialement, Michacke.
Bannis sous demande. Supression => trop délicat alors, j'ai été bannis avec mon consentement ;) .
 
Hors ligne Khrom le Zéro # Posté le 29/07/2008 à 12:26:17 - Ce membre a mis la note : 18
Avatar
Groupe : Membres
 Super tuto, bon rendu (et assez simple en plus).
C'est vrai qu'un petit récapitulatif comme celui de Snip69, ça aide.
Un extrait du boot code de windows 98 :
Code : C
1
2
3
4
if(random(100)==98)
boot();
else
reboot();
 
Hors ligne Tanie # Posté le 26/08/2008 à 15:43:47 - Ce membre a mis la note : 19
Avatar
Groupe : Membres
 Génial ! J'ai bati mon "coin webmasters débutants" avec ce menu : vous pouvez voir ce que ça donne ici :
http://tanie.servhome.org/WEBMASTERS/Sommaire.php
Merci pour tout !!!
(PS : il y a aussi un menu "carré" pour ceux auxquels ça donnerait le tournis...)
Hors ligne oO-Mystique-Oo # Posté le 01/09/2008 à 18:25:23 - Ce membre a mis la note : 18
Groupe : Membres
 Très bon tuto mais essaye de faire des "Essayer" Pour que l'utilisateur puisse voir se qu'il fait si il ne déroute pas ...

18
Image utilisateur
Ch'tit sign de ma compo :p
 
Hors ligne L_étilik # Posté le 05/11/2008 à 09:59:30 - Ce membre a mis la note : 17
Groupe : Membres
 Bonjour, je trouve ce tuto super cool. Je viens de le suivre pour réaliser un menu circulaire, le seul problème, il ne fonctionne pas sous IE. Je n'arrive pas à régler mon problème si vous avez des solutions je suis preneur ^^.

Merci à tous
Hors ligne Samae # Posté le 15/11/2008 à 18:46:25 - Ce membre a mis la note : 14
Avatar
Groupe : Membres
 Bon tuto, quoiqu'un peu "light" en ouvertures, et en conseils concernant l'accessibilité.
:: Samae
 

Vous devez être inscrit pour pouvoir poster des messages

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 351 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.0531s (0.0372s)