Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120741 Menu en forme de roue | | Coucou Voici un code pour réaliser un menu en forme de roue qui tourne. - Code:
-
<html> <head> <title>Menu en roue</title> <meta name="author" content="PLF - /"> <STYLE>A { COLOR: #0000FF; TEXT-DECORATION: none } A:hover { COLOR: #9900FF; TEXT-DECORATION: none } </STYLE>
<script language = "JavaScript"> <!-- //PLF-/ window.moveTo(0,0) //place la page en haut à gauche de l'écran window.resizeTo(screen.width,(screen.height-25)) //ouvre la page à la taille de l'écran(-25 pixels en largeur) if ((screen.width <= 800) && (screen.height <= 600)) { document.write("<style>.lienmenu { font-family: arial; font-size: 14px; position: absolute; width: 200px;visibility:hidden; z-index: 2;}</style>"); } else { document.write("<style>.lienmenu { font-family: arial; font-size: 18px; position: absolute; width: 200px;visibility:hidden; z-index: 2;}</style>"); }
window.setTimeout("sens()", 20000); window.setTimeout("sens2()",40000); function sens(){ deg_rot =Math.PI / -180; window.setTimeout("sens()", 40000); } function sens2(){ deg_rot =Math.PI / 180; window.setTimeout("sens2()", 40000); }
function menu_roue() { for (var i = 0; i < dep.length; i++) { dep[i] += deg_rot; objlien[i].visibility = 'visible'; objlien[i].left = (rayon * Math.cos(dep[i])) + cent_larg objlien[i].top = (rayon * Math.sin(dep[i])) + cent_long; } vit_roue = setTimeout("menu_roue()", 100); }
function creer_objlien() { objlien = new Array(lienmenu1, lienmenu2, lienmenu3, lienmenu4, lienmenu5, lienmenu6, lienmenu7, lienmenu8, lienmenu9, lienmenu10, lienmenu11, lienmenu12); dep = new Array(); dep[0] = 0; for (var i = 1; i < objlien.length; i++) { dep[i] = parseFloat(dep[i - 1] + ((2 *Math.PI) / objlien.length)); } menu_roue(); } function mouss_stop() { deg_old=deg_rot; deg_rot=0 } function mouss_start() { deg_rot=deg_old; }
var deg_rot =Math.PI / 180; // Math.PI / -180 rotation inversée var rayon = ((screen.height)/4); var cent_larg = ((screen.width)/2)-60; var cent_long = ((screen.height)/2)-rayon/2; var objlien; var dep; //--> </script>
</head>
<body>
<div id = "lienmenu1" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div> <div id = "lienmenu2" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div> <div id = "lienmenu3" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "https://forumcrea.forumactif.org//" target="_blank">Crea illusion Fantasy</a></div> <div id = "lienmenu4" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div> <div id = "lienmenu5" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div> <div id = "lienmenu6" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div> <div id = "lienmenu7" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div> <div id = "lienmenu8" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div> <div id = "lienmenu9" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div> <div id = "lienmenu10" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div> <div id = "lienmenu11" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div> <div id = "lienmenu12" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>
<script language = "JavaScript"> <!-- //PLF-/ var lienmenu1 = eval(document.getElementById("lienmenu1").style); var lienmenu2 = eval(document.getElementById("lienmenu2").style); var lienmenu3 = eval(document.getElementById("lienmenu3").style); var lienmenu4 = eval(document.getElementById("lienmenu4").style); var lienmenu5 = eval(document.getElementById("lienmenu5").style); var lienmenu6 = eval(document.getElementById("lienmenu6").style); var lienmenu7 = eval(document.getElementById("lienmenu7").style); var lienmenu8 = eval(document.getElementById("lienmenu8").style); var lienmenu9 = eval(document.getElementById("lienmenu9").style); var lienmenu10 = eval(document.getElementById("lienmenu10").style); var lienmenu11 = eval(document.getElementById("lienmenu11").style); var lienmenu12 = eval(document.getElementById("lienmenu12").style);
creer_objlien(); //--> </script>
</body> </html> Conseils: - Code:
-
Si vous travaillez avec des cadres, ou si vous ne souhaitez pas redimensionner la fenêtre de votre visiteur, supprimez les lignes suivantes : window.moveTo(0,0) //place la page en haut à gauche de l'écran window.resizeTo(screen.width,(screen.height-25)) //ouvre la page à la taille de l'écran(-25 pixels en largeur)
Si vous souhaitez un seul sens de rotation supprimez ces lignes : window.setTimeout("sens()", 20000); window.setTimeout("sens2()",40000); function sens(){ deg_rot =Math.PI / -180; window.setTimeout("sens()", 40000); } function sens2(){ deg_rot =Math.PI / 180; window.setTimeout("sens2()", 40000); }
et choisissez le sens en modifiant :180 par -180 var deg_rot =Math.PI / 180; // Math.PI / -180 rotation inversée
les lignes suivantes indiquent la taille de la police (font-size: 14px) suivant que l'affichage de l'écran est inférieur ou égale à 800x600 ou bien plus grand.
if ((screen.width <= 800) && (screen.height <= 600)) { document.write("<style>.lienmenu { font-family: arial; font-size: 14px; position: absolute; width: 200px;visibility:hidden; z-index: 2;}</style>"); } else { document.write("<style>.lienmenu { font-family: arial; font-size: 18px; position: absolute; width: 200px;visibility:hidden; z-index: 2;}</style>"); }
Vous pouvez changer cette ligne par une simple ligne à mettre avant le script (avant <script language = "JavaScript"> < style>.lienmenu { font-family: arial; font-size: 18px; position: absolute; width: 200px;visibility:hidden; z-index: 2;}</style>
Le nombre de liens est défini dans l'objet "objlien". Ci-dessous il y a 4 liens
objlien = new Array(lienmenu1, lienmenu2, lienmenu3, lienmenu4);
.../...
<div id = "lienmenu1" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "menuroue2.htm" >Afficher le code</a></div> <div id = "lienmenu2" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div> <div id = "lienmenu3" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div> <div id = "lienmenu4" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>
<script language = "JavaScript"> <!-- //PLF-/ var lienmenu1 = eval(document.getElementById("lienmenu1").style); var lienmenu2 = eval(document.getElementById("lienmenu2").style); var lienmenu3 = eval(document.getElementById("lienmenu3").style); var lienmenu4 = eval(document.getElementById("lienmenu4").style);
creer_objlien(); //--> </script>
Le menu apparaît pratiquement au centre de l'écran (Page plein écran) Vous pouvez modifier sa position en jouant sur les valeurs suivantes, sachant que screen.width est la largeur de l'écran en pixel (pas de la page) et screen.height la hauteur : var rayon = ((screen.height)/4); défini la taille du rayon var cent_larg = ((screen.width)/2)-60; défini l'emplacement du menu dans la largeur var cent_long = ((screen.height)/2)-rayon/2; défini l'emplacement du menu dans la longueur
Vous pouvez remplacer ces valeurs par des tailles en pixels.
Code trouvé sur le web |
| |
Drag0nMessages : 1 Venue : 11/02/2022 Je suis : Age : 24 Je vie à : kfldsjf Humeur : flkdsf Mes Points : 16221 Re: Menu en forme de roue | | [postbg=https://i.servimg.com/u/f58/14/04/66/48/nolida10.jpg]merci |
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120741 Re: Menu en forme de roue | | Avec plaisir Drag0n |
| |
Nightfairy
Présence
Merci pour ta présence sur le forum.
Messages : 47 Venue : 23/08/2019 Je suis : Age : 33 Je vie à : Belgique /Hainaut Humeur : Très bonne Mes Points : 34327 Re: Menu en forme de roue | | Bonjour, c'est pour quel menu ? Dommage qui ai pas de photo |
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120741 Re: Menu en forme de roue | | Coucou Pour un site web. Tu peux voir le modèle ici : [Vous devez être inscrit et connecté pour voir ce lien]Bisouss |
| |
Nightfairy
Présence
Merci pour ta présence sur le forum.
Messages : 47 Venue : 23/08/2019 Je suis : Age : 33 Je vie à : Belgique /Hainaut Humeur : Très bonne Mes Points : 34327 Re: Menu en forme de roue | | |
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120741 Re: Menu en forme de roue | | |
| |
sandcreations
Partage
Merci pour ton partage de tes tutos, images
Présence
Merci pour ta présence sur le forum.
Partenaires
Très honoré d'être partenaire
Graphiste Messages : 493 Venue : 14/09/2012 Je suis : Age : 52 Je vie à : Valenciennes Humeur : cool Mes Points : 17281 Re: Menu en forme de roue | | |
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120741 Re: Menu en forme de roue | | Ravie que ce menu te plaise sandcreations
Bisouss |
| |