Jquery pour un menu circulaire

gintoxic Messages postés 524 Date d'inscription Statut Membre Dernière intervention -
prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention - 15 août 2013 à 17:48

bonjour,
je cherche a faire un menu circulaire selon ces criteres :
- chaque élément s'agrandirait au passage de la souris (hover)
- l'élément selectionné se placerait au milieu du cercle, agrandit, donc laissant les autres à leur place (peut-etre avec une opacité réduite.
- lorsque l'élément n'est plus survolé il retourne à sa place

autre cas de figure :
- le cercle est immobile
- il fait une rotation au survol de la souris d'un des élément pour que ce dernier se place dans un bloc (div) situé au sommet (dans la meme idée que le barrillet d'un revolver) et s'agrandit a la taille de la div.

bref que d'idée, et je ne pense pas obtenir de script ici mais simplement avancer avec votre aide si possible

je débute en Jquery mais j'adore cette écriture de script plutot simple

voici ce que j'ai réussi à faire pour le moment et j'avoue etre bloqué car je voudrais pour le moment pouvoir désolidariser chaque <li> des autres sur l'axe Z.. mais je ne comprends pas bien déjà pourquoi le menu est divisé en 2 partie (gauche et droite.

http://symposion.fr/test_menu

je vous pose le code qui tient en une page :

<!doctype html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 ul{
  display:block;
  position:absolute;
  left:40%;
  top:20%;
  z-index:0;
 }
 .item{
  display: block;
  background:green;
  width: 70px;
  height:50px;
  margin-top:50px;
  z-index:0;
 }
 .item2{
  margin-left:-110px;
  z-index: 0
 }
 .item3{
  margin-left:-140px;
  z-index: 0
 }
 .item4{
  margin-left:-110px;
  z-index: 0
 }
 .item5{
  margin-left:110px;
  margin-top:-250px;
  z-index: 0
 }
 .item6{
  margin-left:140px;
  z-index: 0
 }
 .item7{
  margin-left:110px;
  z-index: 0
 }
 .item8{
  z-index: 0
  /*margin-left:100px;*/
 }
 </style>
 <script type="text/javascript" src="scripts_js/jquery.js"></script>
</head>
<body>
 <SCRIPT>
 $(document).ready(function(){
  $('.item').hover(function(event){
   if(event.target == this){
   $(this).css({'width':'210px', 
      'height': '150px',
      'z-index' : '10',
      
      });
  }
  });
  $('.item').mouseout(function(event){
    $(this).css({'width':'70px', 
       'height':'50px',
       'z-index':'0'})
  });
 });
</SCRIPT>
 <ul class="menu">
  <li class="item item1">bla bla bla</li>
  <li class="item item2">bla bla bla</li>
  <li class="item item3">bla bla bla</li>
  <li class="item item4">bla bla bla</li>
  <li class="item item5">bla bla bla</li>
  <li class="item item6">bla bla bla</li>
  <li class="item item7">bla bla bla</li>
  <li class="item item8">bla bla bla</li>
 </ul>

</body>
</html>

Si Dieu a créé l'homme, qui a créé Dieu, l'homme non ?

Afficher la suite

A voir également:

Jquery pour un menu circulaire
Menu déroulant excel - Guide
Canon quick menu - Télécharger - Utilitaires
Windows 11 menu contextuel classique - Guide
Windows 11 menu démarrer classique - Guide
Réinitialiser menu démarrer windows 10 - Guide

6 réponses

Réponse 1 / 6

gintoxic Messages postés 524 Date d'inscription Statut Membre Dernière intervention 10

bon j'ai réussi a régler le probleme en les "divant" et en les mettant en position : absolute.

j'ai appliqué une animation Jquery qui les centre au survaol mais là maintenant je bloc sur le résultat qui ne veut pas faire comme je voudrais :
je désire qu'apres l'anim, ils reviennent chacun à leur place initial, c'est adire inverser l'animation ou l'annuler...
quelqu'un saurait comment je peux annuler cette anim en créant une anim inverse ?

merci par avance

Réponse 2 / 6