Sujet Précédent Sujet Suivant

Jquery pour un menu circulaire

Fermé
gintoxic Messages postés 524 Date d'inscription mardi 31 juillet 2007 Statut Membre Dernière intervention 7 avril 2016 - Modifié par gintoxic le 12/08/2013 à 19:50
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 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 ?
A voir également:

6 réponses

Réponse 1 / 6
gintoxic Messages postés 524 Date d'inscription mardi 31 juillet 2007 Statut Membre Dernière intervention 7 avril 2016 10
12 août 2013 à 23:36
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
Réponse 2 / 6
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
14 août 2013 à 16:45
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
Réponse 3 / 6
gintoxic Messages postés 524 Date d'inscription mardi 31 juillet 2007 Statut Membre Dernière intervention 7 avril 2016 10
14 août 2013 à 16:48
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
Réponse 4 / 6
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
14 août 2013 à 17:20
Pas de soucis,je te commenterai le code et serai là pour répondre à tes questions.
0

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

Posez votre question
Réponse 5 / 6
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
14 août 2013 à 17:24
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
gintoxic Messages postés 524 Date d'inscription mardi 31 juillet 2007 Statut Membre Dernière intervention 7 avril 2016 10
14 août 2013 à 18:26
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
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
15 août 2013 à 09:23
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
Réponse 6 / 6
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
15 août 2013 à 11:41
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
gintoxic Messages postés 524 Date d'inscription mardi 31 juillet 2007 Statut Membre Dernière intervention 7 avril 2016 10
15 août 2013 à 12:40
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
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 15/08/2013 à 13:27
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
gintoxic Messages postés 524 Date d'inscription mardi 31 juillet 2007 Statut Membre Dernière intervention 7 avril 2016 10
15 août 2013 à 13:33
ok pas de souci
et as-tu des ites bien spécifiques ? des livres ? stp
merci
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
15 août 2013 à 17:48
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

menu caché
laurent -
ChariduP -

7 réponses
Comment retrouver le bouton menu de Tv Tcl
Guy -
MPMP10 -

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

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

110 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses