Jquery pour un menu circulaire
gintoxic -  
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 ?

6 réponses

  1.  gintoxic Auteur
    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
    0
    1. prosthetiks
      Je me mets dessus, le problème m'intéresse, du coup je vais le coder. Je partage mon résultat tout à l'heure
      0
      1. gintoxic Auteur
        ah oki... tu pourras expliqure pour les apprentis comme moi stp (je n'aime pas qu'avoir un resultat, j'aime surtout comprendre pour savoir créer par la suite)
        0
        1. prosthetiks
          Pas de soucis,je te commenterai le code et serai là pour répondre à tes questions.
          0
          2. prosthetiks
            Tu peux déjà jeter un oeil là dessus: (J'ai pas encore commenté ;)) 

            <html>
	<head>
		<title></title>
		<style type="text/css">
			.point{
				position: absolute;
				background-color: #999;
				border-radius: 100px;
				display: block;
			}
			nav{
				display: block;
				width: 200px;
				height: 200px;
				border: #333 solid 20px;
				border-radius: 200px;
				position: absolute;
				left: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="menuContainer">
			<ul id="main_nav">
				<li><a href="#link1"></a></li>
				<li><a href="#link1"></a></li>
				<li><a href="#link1"></a></li>
				<li><a href="#link1"></a></li>
				<li><a href="#link1"></a></li>
				<li><a href="#link1"></a></li>
			</ul>
		</div>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">


			var roundedMenu = {
				params: {
					radius: 100,
					start_angle: 0,
					pointSize: 30
				},
				// store the center point default position
				lastPos: {},
				/*Dont edit*/
				menuEl: null,
				angle: null,
				totalItems: 0,
				ori_x: null,
				ori_y: null,
				RT: null, // RotateTimer
				_initialize: function(){
					var me = this;
					var $menuElements = $('ul#main_nav a');
					var $menuEl = $('<nav></nav>');
					$('body').append($menuEl);
					me.totalItems = $menuElements.length;
					me.angle = me.nEls(me.totalItems);
					var i = 0;
					$.each($menuElements, function(key, value){
						me.ori_x = me.params.radius - (me.params.pointSize/2);
						me.ori_y = me.params.radius - (me.params.pointSize/2);
						var k = i%me.totalItems;
						var $menuEntry = $(value);
						var x = me.ori_x + Math.cos(me.angle * k + me.params.start_angle) * me.params.radius;
						var y = me.ori_y + Math.sin(me.angle * k + me.params.start_angle) * me.params.radius;
						$($menuEntry).css('left', x).css('top', y).css('width', me.params.pointSize).css('height', me.params.pointSize).addClass('point');
						$menuEl.append($menuEntry);
						i++;
					});
					$('ul#main_nav').remove();
					this.setListeners();
				},
				setListeners: function(){
					var me = this;
					$('nav a').mouseenter(function(){
						// Centrer link
						if($('nav a.centred')){
							$('nav a.centred').animate({
								left: me.lastPos.left,
								top: me.lastPos.top,
								width: me.params.pointSize,
								height: me.params.pointSize
							});
						}
						$('nav a').removeClass('centred');
						var center = me.params.radius - (me.params.radius /2);
						$(this).addClass('centred');
						me.lastPos.left = $(this).css('left');
						me.lastPos.top = $(this).css('top');
						$(this).animate({
							left: center,
							top: center,
							width: me.params.radius,
							height: me.params.radius
						}, 500);
					});
				},
				nEls: function(n){
					return Math.PI * 2 / n;
				}
			}
			
			roundedMenu._initialize();
		</script>	
	</body>
</html>
            0
            1. gintoxic Auteur
              alors, déjà merci
              un détail tout de meme, quand on survol l'item situé au centre apres le hover, il se place bizarrement et ce pour tous d'ailleurs...

              beau script quand meme ;)

              je mets le lien pour voir http://symposion.fr
              0
            2. prosthetiks
              Il est loin d'être terminé, mais je n'avais plus le temps hier.

              Je m'y remet aujourd'hui et te posterai la suite :)
              0
          3. prosthetiks
            Petite V2 

            <html>
	<head>
		<title></title>
		<style type="text/css">
			body{
				background: rgb(205,235,142); /* Old browsers */
				background: -moz-linear-gradient(top,  rgba(205,235,142,1) 0%, rgba(165,201,86,1) 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(205,235,142,1)), color-stop(100%,rgba(165,201,86,1))); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(top,  rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(top,  rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(top,  rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%); /* IE10+ */
				background: linear-gradient(to bottom,  rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%); /* W3C */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 ); /* IE6-9 */

			}
			.point{
				transition: all linear .3s;
				position: absolute;
				background-color: #888;
				border-radius: 100px;
				display: block;
				transform: scale(1,1);
				-ms-transform: scale(1,1); /* IE 9 */
				-webkit-transform: scale(1,1);
				font-size: 7pt;
				text-align: center;
				line-height: 40px;
				background: rgb(201,222,150); /* Old browsers */
				background: -moz-radial-gradient(center, ellipse cover,  rgba(201,222,150,1) 0%, rgba(138,182,107,1) 44%, rgba(57,130,53,1) 100%); /* FF3.6+ */
				background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(201,222,150,1)), color-stop(44%,rgba(138,182,107,1)), color-stop(100%,rgba(57,130,53,1))); /* Chrome,Safari4+ */
				background: -webkit-radial-gradient(center, ellipse cover,  rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* Chrome10+,Safari5.1+ */
				background: -o-radial-gradient(center, ellipse cover,  rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* Opera 12+ */
				background: -ms-radial-gradient(center, ellipse cover,  rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* IE10+ */
				background: radial-gradient(ellipse at center,  rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* W3C */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
				color: white;
				text-decoration:none;
				box-shadow: 0 0px 5px rgba(0,0,0,.8);
				border:#fff solid 1px;
				opacity: .7;
			}
			nav{
				display: block;
				width: 200px;
				height: 200px;
				border: orange solid 10px;
				border-radius: 200px;
				position: absolute;
				left: 200px;
				height: 200px;
				box-shadow: inset 0 0 10px black;
			}
			.centred{
				z-index: 999;
				transform: scale(4,4);
				-ms-transform: scale(4,4); /* IE 9 */
				-webkit-transform: scale(4,4); /* Safari and Chrome */
				box-shadow: 0 0px 20px rgba(0,0,0,.5);
				opacity:.9;
			}
		</style>
	</head>
	<body>
		<div id="menuContainer">
			<ul id="main_nav">
				<li><a href="#link1">Lorem</a></li>
				<li><a href="#link1">Ipsum</a></li>
				<li><a href="#link1">Dolor</a></li>
				<li><a href="#link1">Sit</a></li>
				<li><a href="#link1">Amet</a></li>
				<li><a href="#link1">:)</a></li>
			</ul>
		</div>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">


			var roundedMenu = {
				params: {
					radius: 100,
					start_angle: 0,
					pointSize: 40
				},
				// store the center point default position
				lastPos: {},
				/*Dont edit*/
				menuEl: null,
				angle: null,
				totalItems: 0,
				ori_x: null,
				ori_y: null,
				RT: null, // RotateTimer
				// Rotations
				currentR: 0,
				_initialize: function(){
					var me = this;
					var $menuElements = $('ul#main_nav a');
					var $menuEl = $('<nav></nav>');
					$('body').append($menuEl);
					me.totalItems = $menuElements.length;
					me.angle = me.nEls(me.totalItems);
					var i = 0;
					$.each($menuElements, function(key, value){
						me.ori_x = me.params.radius - (me.params.pointSize/2);
						me.ori_y = me.params.radius - (me.params.pointSize/2);
						var k = i%me.totalItems;
						var $menuEntry = $(value);
						var x = me.ori_x + Math.cos(me.angle * k + me.params.start_angle) * me.params.radius;
						var y = me.ori_y + Math.sin(me.angle * k + me.params.start_angle) * me.params.radius;
						$($menuEntry).css('left', x).css('top', y).css('width', me.params.pointSize).css('height', me.params.pointSize).addClass('point');
						$menuEl.append($menuEntry);
						i++;
					});
					//this.RT = setInterval(function(){ me.runRotate() }, 20);
					$('ul#main_nav').remove();
					this.setListeners();
				},
				runRotate: function(){
					console.log('Rotate');
					var me = this;
					me.currentR = me.currentR + 1;
					$('.point').css('-webkit-transform', 'rotate('+ me.currentR+'deg)');
					$('nav').css('-webkit-transform', 'rotate(-'+ me.currentR+'deg)');
				},
				setListeners: function(){
					var me = this;
					// :not ne fonctionne pas... ... ?????????
					$('.point:not(.centred)').mouseenter(function(){
						if($(this).hasClass('centred')){return}
						// Centrer link
						if($('nav a.centred')){
							$('nav a.centred').animate({
								left: me.lastPos.left,
								top: me.lastPos.top,
								width: me.params.pointSize,
								height: me.params.pointSize
							}, 500);
						}
						$('nav a').removeClass('centred');
						var center = me.params.pointSize * 2;// - (me.params.radius *2);
						$(this).addClass('centred');
						me.lastPos.left = $(this).css('left');
						me.lastPos.top = $(this).css('top');
						$(this).animate({
							left: center,
							top: center
							//width: me.params.radius,
							//height: me.params.radius
						}, 200);
					});
				},
				nEls: function(n){
					return Math.PI * 2 / n;
				}
			}
			
			roundedMenu._initialize();
		</script>	
	</body>
</html>
            0
            1. gintoxic Auteur
              beh c'super !! je note encore quelques bug sous Chrome cependant...
              par contre bien entendu je n'y comprends pas grand chose... si tu peux expliquer stp...
              donc un grand merci ;)
              je rêve un peu de réussir ce genre de prouesse...
              comment apprendre en dehors des écoles ?
              0
            2. prosthetiks
              Fixage de bugs et explications dans la soirée. Pour ce qui est de l'apprentissage, une base théorique est souvent la bienvenue, mais sinon il n'y a que la pratique et la curiosité qui permettent de progresser... lire du code, faire des tutos, parcourir les forums, ...
              0
            3. gintoxic Auteur
              ok pas de souci
              et as-tu des ites bien spécifiques ? des livres ? stp
              merci
              0
            4. prosthetiks
              on trouve pas mal de tutos sur le site du zéro et sur developpez.com et d'astuces sur stackoverflow. Après, en fonction de tes recherches sur ton meilleur ami, tu tomberas sur une multitude de blogs et autres articles que je te conseille de dévorer. Je suis pas très fan des bouquins, ils sont très rapidement obsolètes...
              0

          Discussions similaires

          Comment faire afin d'accéder au boot menu ou BIOS sous MSI ?
          Kaheil

          7 réponses
          Comment activer le Bluetooth sur une TV Samsung ?
          zaraki490

          110 réponses
          Mon PC marque press the esc key for startup menu
          Jonas2022

          5 réponses
          menu caché
          laurent

          7 réponses
          Déblocage du mode hôtel Philips 20HF5234/10
          Jo_3

          7 réponses