Menu rotatif code
Fermé
milirium
Messages postés
5
Date d'inscription
mardi 28 mars 2017
Statut
Membre
Dernière intervention
16 août 2019
-
12 août 2019 à 18:20
Phebus - 18 août 2019 à 04:57
Phebus - 18 août 2019 à 04:57
A voir également:
- Menu rotatif code
- Menu déroulant excel - Guide
- Code asci - Guide
- Code puk bloqué - Guide
- Menu démarrer windows 11 - Guide
- Code telephone oublié - Guide
4 réponses
Salut,
euh menu rotatif ça voudrais dire que quelque chose tourne, ensuite on est pas très avancé. si vous n'arrivez pas à expliquer avec des mots et qu'il faut une vidéo mieux vaut laisser tomber: un menu est censé être accessible pas compliqué à utiliser ;) encore moins à comprendre!
Concrètement pour qu'il y ait quelque chose qui tourne il faut déterminer un centre et une valeur d'angle.
qu'avez vous commencé à faire?
Une animation CSS suffirait elle?
https://www.w3schools.com/cssref/css3_pr_transform.asp
Pour l'interactivité on peut envisager JavaScript. Mais bon pareil:
"Le principe est simple"
peut-être mais pas vos explications ni votre compréhension de ce que vous devez faire...alors ça aide pas.
" ce serait comme un cercle avec différents icônes et on pourrait faire tourner le cercle pour aller de droite a gauche "
ça tourne ou ça va de droite à gauche? faire tourner un cercle si c'est autour de son centre ça reste un xcercle, faites plutôt tourner vos icônes. Enfin ça à l'air compliqué pour quelque chose de pas pratique à utiliser surtout! Mieux vaut pas vous casser la tête et faire quelque chose simple. Sinon pour faire roter(oui c'est le vrai mot) un élément faites comme dans l'exmple présenté dans le lien:
Astuce vous pouvez changer le CSS comme le contenu HTML avec JavaScript:
ici lors d'un clic
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_innerhtml
euh menu rotatif ça voudrais dire que quelque chose tourne, ensuite on est pas très avancé. si vous n'arrivez pas à expliquer avec des mots et qu'il faut une vidéo mieux vaut laisser tomber: un menu est censé être accessible pas compliqué à utiliser ;) encore moins à comprendre!
Concrètement pour qu'il y ait quelque chose qui tourne il faut déterminer un centre et une valeur d'angle.
qu'avez vous commencé à faire?
Une animation CSS suffirait elle?
https://www.w3schools.com/cssref/css3_pr_transform.asp
Pour l'interactivité on peut envisager JavaScript. Mais bon pareil:
"Le principe est simple"
peut-être mais pas vos explications ni votre compréhension de ce que vous devez faire...alors ça aide pas.
" ce serait comme un cercle avec différents icônes et on pourrait faire tourner le cercle pour aller de droite a gauche "
ça tourne ou ça va de droite à gauche? faire tourner un cercle si c'est autour de son centre ça reste un xcercle, faites plutôt tourner vos icônes. Enfin ça à l'air compliqué pour quelque chose de pas pratique à utiliser surtout! Mieux vaut pas vous casser la tête et faire quelque chose simple. Sinon pour faire roter(oui c'est le vrai mot) un élément faites comme dans l'exmple présenté dans le lien:
div.a {
transform: rotate(20deg);
}
Astuce vous pouvez changer le CSS comme le contenu HTML avec JavaScript:
ici lors d'un clic
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_innerhtml
milirium
Messages postés
5
Date d'inscription
mardi 28 mars 2017
Statut
Membre
Dernière intervention
16 août 2019
13 août 2019 à 10:18
13 août 2019 à 10:18
Le menu que je cherche a faire serait très simple, ce serait présenter comme un système solaire sur le quel on pourrait naviguer de gauche a droit sur chaque planète et quand on clique sur la planète une pagr s'ouvre
milirium
Messages postés
5
Date d'inscription
mardi 28 mars 2017
Statut
Membre
Dernière intervention
16 août 2019
13 août 2019 à 16:41
13 août 2019 à 16:41
Pour ke moment je n'ai rien commencé je le ferais en fin de semaine je vous dirait si j'ai réussi a faire ce que je veux faire
milirium
Messages postés
5
Date d'inscription
mardi 28 mars 2017
Statut
Membre
Dernière intervention
16 août 2019
16 août 2019 à 14:42
16 août 2019 à 14:42
Voilà comment je pourrais le mieu d'écrire le menu que je cherche c'est comme si on avait une grande roue au milieu et on pouvais naviguer de gauche a droit pour cliquer sur une nacelle
Si vous comprenez mieu
Si vous comprenez mieu
Pas vraiment ergonomique donc à éviter!
ensuite si vous avez envie , pourquoi pas... sauf qu'en général un menu c'est pas pour se faire plaisir mais pour les utilisateurs ;)
Je suppose que vous avez déjà toutes les images et la mise en page et savez utiliser un écouteur d'événement en JavaScript? Avez ça vous avez tout ce dont vous avez besoin! C'est pas compliqué juste inutile et complexe pour pas grand chose mais si c'est ça que vous voulez!
Éventuellement si vous voulez vous compliquer la vie plus encore faites tous les graphismes en SVG(en fait ça sera assez simple de faire une rotation ensuite) ou si vous voulez une animation de grande qualité utilisez CANVAS avec une boucle de type window.requestAnimationFrame ou son équivalent plus ancien(genre un setTimeOut).
je fais un petit truc vite fait dans le genre et met le code pour vous donner une idée.
ensuite si vous avez envie , pourquoi pas... sauf qu'en général un menu c'est pas pour se faire plaisir mais pour les utilisateurs ;)
Je suppose que vous avez déjà toutes les images et la mise en page et savez utiliser un écouteur d'événement en JavaScript? Avez ça vous avez tout ce dont vous avez besoin! C'est pas compliqué juste inutile et complexe pour pas grand chose mais si c'est ça que vous voulez!
Éventuellement si vous voulez vous compliquer la vie plus encore faites tous les graphismes en SVG(en fait ça sera assez simple de faire une rotation ensuite) ou si vous voulez une animation de grande qualité utilisez CANVAS avec une boucle de type window.requestAnimationFrame ou son équivalent plus ancien(genre un setTimeOut).
je fais un petit truc vite fait dans le genre et met le code pour vous donner une idée.
les fléches gauche et droite permettent de faire tourner le carré (dans un sens ou l'autre). C'est bien sûr à adapter à votre idée.
dans la balise script:
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8"/>
<style type='text/css' rel='stylesheet'>
body{margin:0;padding:0;margin-top:15%;text-align:center;}
div{display:inline-block;}
</style>
</head>
<body>
<script>
<!-- contenu dans bloc de code suivant pour plus de clarté //-->
</script>
</body>
</html>
dans la balise script:
document.body.onload=function(){
/** quelques variables**/
let angle=0;//-- valeur de l'angle en degrés
let maxAngle=360;//-- valeur max
let minAngle=-360;//-- valeur min
let vitesseRotation=15;//-- toujours en degrés
/* creation d'un element et ajout dans la page*/
let carre=document.createElement('div');
carre.id=carre;
carre.style.backgroundColor='#000';
carre.style.width='3em';
carre.style.height='3em';
carre.style.borderWidth='0.25em';
carre.style.borderStyle='solid';
carre.style.borderColor='red blue green yellow';
document.body.appendChild(carre);
/* interactivité */
/* le test des touches ici pour fléche droite et gauche*/
function checkKBD(evt){
let chk=false;
if(evt.keyCode){
switch(evt.keyCode){
case 37:chk=-1;break;
case 39:chk=1;break;
default:chk=false;break;
}
return chk;
}
}
document.addEventListener('keyup', function(e){
console.log(e);
let tmp=checkKBD(e);//-- détection si rotation et dans quel sens(ou pas)
if(tmp!= false){
angle+=tmp*vitesseRotation
if(angle>maxAngle || angle<minAngle){
//-- au dessus ou en dessous de 360°(tour complet) on remet à zéro (pour simplifier)
angle=0;
}
console.log('l\'angle de rotation est '+angle+' degrés');
// applique la nouvelle valeur d'angle
carre.style.transform="rotate("+angle+"deg)";
}//--'-ms-transform: rotate('+angle+'deg); /* IE 9 */-webkit-transform: rotate('+angle+'deg); /* Safari 3-8 */
},false);
}
