Menu rotatif code

Messages postés
5
Date d'inscription
mardi 28 mars 2017
Statut
Membre
Dernière intervention
16 août 2019
- - Dernière réponse :  Phebus - 18 août 2019 à 04:57
Bonjour,
Je cherche a faire un menu rotatif au centre de mon site internet comme on peux le voir sur certain menu (dokkan battle).
Le principe est simple ce serait comme un cercle avec différents icônes et on pourrait faire tourner le cercle pour aller de droite a gauche
Et malheureusement je bloque sur comment le faire (j'ai quelque base en programmation Javascript html et css)
Si vous auriez une idée comment je pourrais mettre tout ça sous code ce serais top.

Merci d'avance
PS: si vous comprenez pas le principe du menu rotatif je pourrais envoyer une vidéo



Configuration: Android / Chrome 76.0.3809.89
Afficher la suite 

4 réponses

0
Merci
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:
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
Commenter la réponse de Phebus
Messages postés
5
Date d'inscription
mardi 28 mars 2017
Statut
Membre
Dernière intervention
16 août 2019
0
Merci
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
D'accord, donc qu'avez vous commencé à faire? naviguer de gauche à droite ça me parle toujours pas, surtout s'il y a une rotation...
Les exemples que j'ai donné devraient vous aider. Il est possible aussi de détecter les événements comme les touches du clavier.
Commenter la réponse de milirium
Messages postés
5
Date d'inscription
mardi 28 mars 2017
Statut
Membre
Dernière intervention
16 août 2019
0
Merci
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
Commenter la réponse de milirium
Messages postés
5
Date d'inscription
mardi 28 mars 2017
Statut
Membre
Dernière intervention
16 août 2019
0
Merci
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
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.
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.
<!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);
}
Commenter la réponse de milirium