begin process at 2012 05 28 11:19:05
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Menu & Co

 > MENU CIRCULAIRE

MENU CIRCULAIRE


 Information sur la source

Note :
7,4 / 10 - par 5 personnes
7,40 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Classé sous :menu, circulaire, pays, html, css Niveau :Débutant Date de création :18/07/2010 Vu / téléchargé :8 883 / 1 537
Auteur : adelmonis

Ecrire un message privé
Site perso
Commentaire sur cette source (41)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Les items tournent dans le sens des aiguilles d'une montre. Ce peut être des images comme dans l'exemple ou un texte. Ce petit menu est fait à base de HTML, CSS et Javascript, PAS BESOIN DE FLASH. Il est compatible avec plusieurs navigateurs. Je suis débutante et c'est ma première vrai réalisation. Sans faire de pub, mais en étant honnête, je me suis inspiré du Site du Zéro.



 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources de la même categorie

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec Zip FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41
Source avec Zip Source avec une capture TREEMENU-2.3.6-MACNIP par neep
Source avec Zip Source avec une capture MENU TASKBAR WINDOWSXP HOME par micking
Source avec Zip Source avec une capture MENU ANIMER HORIZONTALE OU VERTICAL , ACCÈSSIBLE SANS JS (SA... par Kimjoa
Toutes les sources de la catégorie Menu & Co

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec une capture PRÉSENTOIR PAGE/SUJET par tiranus
Source avec Zip QUIZ HTML CSS ET JAVASCRIPT par lecurieux41
Source avec Zip Source avec une capture [MEC] MENUS EN CSS par Bul3
SQUELETTE DE PAGE EN DEUX COLONNES par Massedil

Commentaires et avis

Commentaire de proftnj le 26/07/2010 02:47:56

Pas besoin de flash, mais utilisation de php: il aurait fallu le signaler.
Bonne continuation.

Commentaire de ircland le 26/07/2010 07:11:47

@Proftnj: il y a pas vraiment de PHP autre que la déclaration suivante :

#  <script type="text/javascript">
# var currentM = <?php echo $agenda->mois; ?>;
# var currentA = <?php echo $agenda->année; ?>;
# </script>

@AdelMonis: le php marchera pas si tu le mets dans un ficher .html sans .htaccess...

Commentaire de adelmonis le 26/07/2010 22:04:51

Il fonctionne pour moi. Euh !... S'il y a pb, je suis désolé.

euh!...
:-S

Commentaire de alex67cv le 02/08/2010 08:11:16

Bonjour,tout d'abord je trouve votre travail bien fait...c'est pas mal du tout...et vous remercie de le faire partager...j'aurais une petite question,j'aimerais bien pouvoir utiliser ce menu mais avec des images comme les vôtres de pays mais pas ceux la,je m'explique,pour mon site j'aurais besoin d'avoir ce menu mais avec que des pays européens comme images mais il me faudrait les mêmes images identique en apparence mais d'autres pays? Où puis je les trouver s'il vous plait?
Car je ne peux pas garder disons l'images de la France et y mettre à la place des autres des images simples de drapeaux...?
Je sais pas si vous avez bien compris ma demande,je voudrais simplement ce genre d'images exactement mais d'autres pays,en l'occurrence européens et les État-unis aussi...
Puis je savoir ou les trouver s'il vous plait?
Merci d'avance.

Commentaire de alex67cv le 04/08/2010 22:49:06

Allooo...y a t'il quelqu'un pour me répondre ? Je voudrais juste savoir où trouver le même style d'images mais des autres pays qui m'intéresse...pour pouvoir inclure ce script à mon site...
Merci d'avance.

Commentaire de proftnj le 04/08/2010 23:04:18

@ Alex67cv :

Fais des recherches sur Google.
Ou tu faits tes images toi-même.
Ou tu les faits faire par quelqu'un qui s'y connaît.

Ici, on s'occupe plutôt de scripts que l'on peut adapter à ses besoins, pas d'images.

Cordialement.

Commentaire de Nirvamaster le 16/10/2010 21:12:09 10/10

ok bien !

Commentaire de alex67cv le 25/10/2010 07:27:08

Bonjour,alors oui après quelques recherches et bien je me suis rendu compte que ses images là de drapeaux était fait et sont faisables via le logiciel Microsoft...
Lors de ma demande,je penser que ses images avait été trouver sur un site spécifique,d'où cette demande car ca correspondait à ce dont j'avais besoin pour un site,je sais maintenant comment faire ce style de drapeaux.
Il est vrai que c'est un site de script et je m'en excuse.
Encore merci à l'auteur de ce script,...et pour les derniers conseils.
Cordialement.

Commentaire de alex67cv le 25/10/2010 07:27:34 10/10

Oupss...la note...

Commentaire de ig3 le 29/10/2010 11:06:49

très bon script thanks pour le code

Commentaire de dingofou le 12/01/2011 23:13:08 10/10

Bonjour
tres beau menu circulaire...dites pouvez vous me donner la solution pour rajouter encore plus de drapeau??
d'avance je vous en remerci

Commentaire de adelmonis le 13/01/2011 22:17:29

Bonjour,

Dans le code html ci-dessous

#
"
<body onload="menu(6)";>
<div id="menu" onmouseover="stopanim();" onmouseout="replayanim();">
<h2><a href="#">Accueil</a></h2>
<div id="centre" align="center" valign="middle"></div>
<ul>
<li id="item1"><img src="Argentina.gif" width="100px" height="100px"/><br>Argentine</li>
<li id="item2"><img src="Brazil.gif" width="100px" height="100px"/><br>Brésil</li>
<li id="item3"><img src="Cameroon.gif" width="100px" height="100px"/><br>Cameroun</li>
<li id="item4"><img src="Canada.gif" width="100px" height="100px"/><br>Canada</li>
<li id="item5"><img src="France.gif" width="100px" height="100px"/><br>France</li>
<li id="item6"><img src="Chile.gif" width="100px" height="100px"/><br>Chili</li>
</ul>
</div>
</body>
#

tu changes dans body le nombre d'icônes (drapeau, images divers). Ici il y a 6 images. Mais tu peux en mettre autant que tu en veux.

voilà à +

Commentaire de dingofou le 13/01/2011 23:04:41

merci....ca maaarche
bon encore une question. apres avoir rajoute des drapeau.....comment peut-on faire pour les ecarter ?? car ils ont trop les sur les autres

Commentaire de adelmonis le 15/01/2011 21:25:46

:-) Il faut régler ceci dans le code javascript. Essaie de modifier les paramètre au fur et à mesure.

voilà, euh, j'espère que ça ira.

à +

Commentaire de dingofou le 17/01/2011 15:27:19

merci ce bon j'ai trouvé a l'adapter.....

Commentaire de xavios01 le 19/01/2011 01:10:39

bonjour.
merci pour le petit script , j'aimerai éloigner les items du centre  de rotation  qu'ils soit plus loin. quelqu'un a une idée? Merci beaucoup :)

Commentaire de xavios01 le 31/01/2011 07:02:19

up:)

Commentaire de xavios01 le 31/01/2011 07:04:02

Oups il est trop tard , je me suis mal Exprimer j'aimerai déplacer le centre pour qu'il soir au milieu ou a un endroit que je choisi , car mon menu est sur la gauche :) merci pour les infos je suis débutant , désolé du petit flood :)

Commentaire de dingofou le 31/01/2011 08:34:48

salut

moi j'ai juste mis la balise <center> au debut du script et </center>a la fin de celui-ci pour le centrer et pour eloigner les images cherche du côté du php tu as quelques chiffres a modifier je ne te diré pas lequels ainsi en cherchant tu veras les different resultats.
j'espere t'avoir aidé ou au moins t'avoir eclairé un peu plus, et beau travail Adelmonis il est magnifique ce script.

Commentaire de xavios01 le 31/01/2011 23:04:14

merci pour la reponse ;) pour eloigner Les objets j'ai trouver merci ;)c'est dans le JS ,

sinon j'ai une tite question.  Peut ton Mettre un image au centre du menu circulaire  ce serait simpa ;)

sinon j'ai rajouter aussi (car un menu sans lien pas tres utiles ;) exemple:

<li id="item1"><img src="Argentina.gif" width="100px" height="100px"/><br>Argentine</li>

qui serait plus dans le genre ceci :
<li id="item1"><a href="lienerslaPagequetuveu.html"><img src="Argentina.gif" border=no width="100px" height="100px"/><br>Argentine</a></li>

(le border=no pour enlever les cadre tout moche )

ps;n'oubliez pas que je suis débutant :)

Commentaire de dingofou le 01/02/2011 08:59:59

salut

regarde ici www.iglesia-evangelica-eurolatina.com je m'en suis servi comme page d'intro reactulise la page et le texte au centre chaque a chaque fois

       <center><body onload="menu(21)">
<div id="menu">
<div id="centre" align="center" valign="middle"></div>
            <center><table width="350" border="3" cellpadding="#E3CFD0">
  <tr>
    <td><div>
ici rajouté une table (dreamweaver)dans laquelle j'ai mis le script

<center><table width="350" border="3" cellpadding="#E3CFD0">
  <tr>
    <td><div>
<script> ..........

j'espere t'avoir aidé

Commentaire de davidmnestor le 29/03/2011 00:13:13

Bonjour à tous
Super script. félicitation, moi je débute et ça marche. bravo.
J'aimerais savoir, comment ne pas stoper le déroulement quand on rapproche le pointeur ?
si quelqu'un a une idée merci d'avance.

Commentaire de davidmnestor le 29/03/2011 00:44:00

Re salut, c'est encore moi ! ça y est j'ai neutraliser le pointeur en effaçant " id="menu" onmouseover="();" onmouseout="();" ", cordialement à plus

Commentaire de davidmnestor le 29/03/2011 01:55:42

Re re moi ! je pense qu'a cette heure vous dormez,
mais je n'ai pas réussi à trouvé comment écarter les images dans le js.
Merci de m'orienter.
Voici l'état de mon travail.
http://nestorlepingouin.com/menu-circulaire-nestor.php#
Vos critiques et vos conseils sont les bien venus.
Cordialement

Commentaire de dingofou le 29/03/2011 08:52:45

regarde ans le .JS y doit y avoir une ligne  "marging"( pas sur je ne suis pas sur mon pc) joue avec les valeurs une a une et tu trouveras pas complqué
si tu ne trouve pas ce soir peut etre je pourrais t'aider plus

Commentaire de davidmnestor le 29/03/2011 14:05:52

Merci Dingofou d'avoir répondu,
Non ! Il n'y a pas de "marging" !
j'attends ce soir, cordialement

Commentaire de proftnj le 29/03/2011 17:58:41

"margin", pas "marging".

Commentaire de dingofou le 29/03/2011 23:41:45

salut

dsl pour cet reponse tardive.. je te met le code menu.js teste avec ca et tu veras si oui non ca t'ecarte les drapeaux

var decalage = 0;
var nbBout;   
var timer;

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++;
}
}

function anim()
{   
decalage++;
var angle = 360 / nbBout;
var posX;
var posY;
var rayon = 300;
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 + 10 + rayon * Math.cos((b + decalage) * Math.PI / 180);
  posY = centreY + 200 + 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++;
}
}

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

function stopanim()
{
clearInterval(timer);   
}

function replayanim()
{
timer = setInterval("anim()",50);
}


il me semble que l'on ecarte les items avec la valeur RAYON mais je ne suis plus sur

Commentaire de davidmnestor le 30/03/2011 00:12:34

Bravo ! Oui ! Super génial ça marche, tu peux le constater,
http://nestorlepingouin.com/menu-circulaire-nestor.php
je t'en remercie.

Commentaire de davidmnestor le 30/03/2011 00:20:48

Et vraiment encore bravo à l'auteur, qui j'espère va me donner ses informations pour que je puisse l'installer dans mes crédits :
http://nestorlepingouin.com/liens-dedies.php

nestor@david-michel.com

Cordialement.

Davidmnestor

Commentaire de dingofou le 30/03/2011 00:58:36

ben j'suis content d'avoir pu t'aider

compare ce que je t'ai donné avec l'original car quelque part j'ai changé un truc pour pas que ca s'arrete....car je ne m'en sert pas comme liens mais juste presentation
alor que toi il faudrait que lorsque tu met la souris dessus il s'arrete... pour que le choix soit plus facil..
si tu ne trouve pas ben......je regarderais de mon coté ;)

Commentaire de davidmnestor le 30/03/2011 01:05:24

Non ! ne t'en fais pas c'est moi qui ai viré le stop mouse, car comme c'est des enfants qui fréquentent mon site c'est un peu un jeu d'adresse.
Cordialement. merci encore.

Commentaire de dingofou le 30/03/2011 07:54:52

haa ok ben c'est pas mal
allez a plus et si t'a besoin n'hesite pas....

chao

Commentaire de davidmnestor le 30/03/2011 09:13:27

Merci à toi grand Dingofou !
et pour adelmonis je note 20/10 puisse le plafond est déjà atteint.
chao à +

Commentaire de Gp2mv3 le 14/06/2011 16:40:03

Dis mon gros, la prochaine fois que tu piques un code à quelqu'un, essaye quand même de faire un lien vers l'original !
Ça ne m'étonne pas que tu ne saches pas aider les autres, je suis sur que tu ne comprends même pas mon code.
Pour ceux que ça intéresse l'original est sur le site du zéro avec toutes les explications des fonctions et de toutes les variables : http://www.siteduzero.com/tutoriel-3-35692-creer-un-menu-circulaire.html

Si vous avez des questions/problèmes, n'hésitez pas à venir me les poser dans les commentaires du tutoriel. ;)

Commentaire de proftnj le 14/06/2011 17:59:06 1/10

Un code piqué!

A quoi cela sert-il de piquer un code et de se l'approprier en ne citant pas clairement ses sources?

C'est pathétique.

Commentaire de dingofou le 15/06/2011 00:46:28

ce n'est pas moi qui est piké le code........j'espere que ces comments ne sont pas d'ailleur pour moi...

Commentaire de adelmonis le 17/07/2011 13:10:21

Pour information je n'ai jamais prétendu que c'était mon code et si vous avez bien lu le message de présentation j'ai bien cité le cite du zéro. J'ai pris ce code qui me semblais facile et je l'ai travaillé à plusieurs reprises. Pour le recopier lorsque j'avais enfin compris le mécanisme. Je ne suis pas toujours sur ce site pour pouvoir aider. Je m'excuse si les personnes ont pensés que je l'avais inventé. J'ai juste mis des images à moi et essayé de comprendre. Lorsque j'ai vu que cela marchait je l'ai recopié. Gp2MV3 je ne me rappelais plus du lien mais je n'ai jamais dit que je l'avais inventer....

Commentaire de Gp2mv3 le 22/07/2011 18:49:41

Alors tu cites l'auteur et un lien vers le tutoriel de départ: http://www.siteduzero.com/tutoriel-3-35692-creer-un-menu-circulaire.html
La licence est en cc by nc donc tu DOIS citer l'auteur: http://creativecommons.org/licenses/by-nc/2.0/fr/

Commentaire de adelmonis le 06/08/2011 00:26:50

JE PRESENTE MES EXCUSES MAIS JE CITERAI DORENAVANT LA SOURCE.....EXACTE...... Le site du zéro est super pour apprendre et comprendre et merci au site Codes-Sources pour tous ces tuyaux.....

Ton menu m'a paru très cool et bien fais, et surtout facile à comprendre. J'ai voulu le partager lorsque j'avais compris le mécanisme....

SANS RANCUNE.... JE ne l'ai pas mis en ligne dans l'intention de te nuire.... A plus

Commentaire de HACKANDROID le 30/08/2011 23:46:14 6/10

Je connais c'est facile a faire mais bravos quand même!

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Menu avec cotès arrondis | HTML - CSS | [ par darksam ] [b]Bonsoir,[/b] Comme le titre l'indique, j'aimerais créer un menu avec cotés arrondis ([i]HTML - CSS[/i]). J'ai visualiser beaucoup de sites Web qui création d'un menu en javascript/HTML/CSS [ par marty91410 ] bonjour, je cherche a créer un menu dynamique pour mon site web. le mieux serait un logiciel genre DHTML MENU STUDIO que j'ai testé et que j'aime be Les boites de texte avec CSS [ par RoMz34 ] Bonjour, Il y à quelques jours, je me suis lancer dans le design d'un site web, et maintenant, j'aimerais le coder ;). J'ai donc suivit quelques tuto Creer une page CSS à partir d'une page html [ par karimfellah ] slt tous le monde, j'aimerai bien vous posez une question:j'ai besoin d'un code source qui permet de creer une page css à partir d'une page html je m' demande projet html & css [ par profiter ] bonjour, on vient de finir le cours de html et nous somme au css maintenant et pour bien maitriser ce q'on a fait il faut le mettre en application probleme z-index / CSS [ par ju0123456789 ] Bonjour, J'ai affaire à un souci qui parait simple, mais je n'arrive pas a avoir le resultat souhaité. J'ai tout simplement 2 DIV, un que je souhaite PROBLEME D'AFFICHAGE DE MON MENU SUR INTERNET EXPLORER? [ par gillesali ] Bonjour à tous, Je tiens avant tout à vous remercier pour toutes les infos contenu sur ce forum, une vrai mine d'or pour quelqu'un encore en voie de probleme avec mon sous menu horizontale sous IE [ par gillesali ] Bonjour à tous, Désolé, je ne sais pas si c'est la bonne rubrique mais visiblement le forum "au secours" ne s'affiche pas dans le menu déroulant. Es Menu d'images : appel des images dans le html/body ou dans le css/head [ par christ_l ] Bonjour, Je débute en html/jquery/css En faisant des recherches sur le web pour la réalisation d'un menu en images (car la police souhaité est trop Div en quantité énorme ... [ par jeanmorelle ] Salut, y-a-t-il un moyen pour gérer des div en quantité ? J'ai un site assez gros avec 1000 div (identiques au départ et qui, par la suite et pour cer


Nos sponsors


Sondage...

Comparez les prix


Motorola MILESTONE
Entre 489€ et 489€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,655 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)