http://www.monjavascript.net

ACCUEIL
Contact
Rechercher
Insérez dans vos
  favoris

ACCUEIL DES
  VISITEURS

DATE & HEURE
EFFETS DE TEXTE
FENETRES
FORMULAIRES
IMAGES
MENUS
PRATIQUE
POP UP
DIVERS

Cours de javascript
Générer vos Fichiers
  CSS

Générer vos Meta-Tags
Description des Balises
  Meta

Les Codes Couleur
L'objet Math
Lissage De Prêt
Tableau d'Amortissement
un Multi-Moteurs de recherche sur Votre Site
Cryptez votre e-mail
  pour contrer le Spam

Cryptez vos Scripts
Moteurs de recherches
Référencement
Je Crée Mon Site
L'éditeur JavaScript

Un menu en Forme de Roue

Revoir la page "Menu en roue"

Pour récupérer le menu en forme de roue et l'installer sur votre site

Télécharge le fichier : rouemenu_zip ou bien

Insérez le code ci-dessous dans Une page vierge


<html>
<head>
<title>Menu en roue</title>
<meta name="author" content="PLF - http://www.monjavascript.net/">
<STYLE>A {
COLOR: #0000FF; TEXT-DECORATION: none
}
A:hover {
COLOR: #9900FF; TEXT-DECORATION: none
}
</STYLE>

<script language = "JavaScript">
<!--
//PLF-http://www.monjavascript.net/
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 = "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 = "http://tavutatete.monjavascript.net/" target="_blank">TAVUTATETE</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 = "menuroue2.htm" >Afficher le code</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 = "http://www.monjavascript.net/" target="_blank">Mon javascript</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 = "menuroue2.htm" >Afficher le code</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 = "http://www.lacuisinedemacopine.net" target="_blank" >La cuisine de ma Copine</a></div>
<div id = "lienmenu12" onMouseOver="mouss_stop()" onMouseOut="mouss_start()" class = "lienmenu"> <a href = "#" >Lien vide</a></div>

<script language = "JavaScript">
<!--
//PLF-http://www.monjavascript.net/
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>


et corrigez le comme suit

nom de la page à ouvrir    -    Texte du lien    -    Pour une ouverture dans une autre fenêtre du navigateur

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-http://www.monjavascript.net/
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

Ce site vous a plu ? Vous avez trouvé le script que vous cherchiez ?
Faites en profiter vos visiteurs : insérez un lien sur votre site

 
 
Mon javascript    13-12-2018