Jquery pour un menu circulaire

gintoxic Messages postés 566 Statut Membre -  
prosthetiks Messages postés 1309 Statut Membre -
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 Messages postés 566 Statut Membre 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
    0
  2. prosthetiks Messages postés 1309 Statut Membre 431
     
    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
  3. gintoxic Messages postés 566 Statut Membre 10
     
    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
  4. prosthetiks Messages postés 1309 Statut Membre 431
     
    Pas de soucis,je te commenterai le code et serai là pour répondre à tes questions.
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. prosthetiks Messages postés 1309 Statut Membre 431
     
    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 Messages postés 566 Statut Membre 10
       
      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 Messages postés 1309 Statut Membre 431
       
      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
  7. prosthetiks Messages postés 1309 Statut Membre 431
     
    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 Messages postés 566 Statut Membre 10
       
      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 Messages postés 1309 Statut Membre 431
       
      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 Messages postés 566 Statut Membre 10
       
      ok pas de souci
      et as-tu des ites bien spécifiques ? des livres ? stp
      merci
      0
    4. prosthetiks Messages postés 1309 Statut Membre 431
       
      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 -
Ismo87 -

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

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

5 réponses
menu caché
laurent -
ChariduP -

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

7 réponses