Archive pour la catégorie ‘javascript’

2 exemples de navigation suivant la souris avec jQuery

Mercredi 21 avril 2010

Je continue de partager avec vous les choses qui me passent par la tête et que je me débrouille (tant bien que mal) à réaliser.
Vous vous souvenez de ces navigations flash qui suivaient la souris et qui se déployaient autour du curseur ? Amusons-nous avec notre bibliothèque javascript préférée.

Il y a de nombreuses façons d’appliquer ce concept de menu mobile, je vous propose 2 possibilités.

La première étant un bloc glissant sur le côté et suivant les mouvements de la souris seulement dans l’axe verticale, et un menu qui se déploie sur toute la longueur de la colonne de contenu.

La démo 1

Voici la structure HTML du menu uniquement


Le menu étant le bloc qui va contenir toute la navigation. On place les boutons dans une liste qu’on camoufle et qui s’ouvrira quand on cliquera sur le ’bouton opener’.

Voici le CSS :

#container {
	position:relative;
	width:800px;
	margin:0 auto;
	padding:50px 20px;
	height:1200px;
	background:#fefefe;
	border:1px solid #eee;
	border-top:none;
	border-bottom:none;
}
#menu {
	position:absolute;
	display:block;
	padding:0;
	color:#fff;
	left:0;
	top:0;
	width:840px;
	height:40px;
}
.opener {
	cursor:pointer;
	position:absolute;
	float:left;
	width:120px;
	background:#555;
	text-align:center;
	padding:10px 0;
	color:#fff;
	left:-110px;
	border-right:1px solid #ddd;
	-webkit-border-radius:4px 0 0 4px;
	-moz-border-radius:4px 0 0 4px;
	/*border-radius:4px 0 0 4px;*/
}
.opener:hover,
.opener:focus,
.opened {
	background:#eee;
	color:#474747;
}
#menu ul {
	margin:0;
	height:38px;
	width:840px;
	background:#eee;
}
#menu li {
	float:left;
	list-style:none;
	border-right:1px solid #ddd;
	padding:0;
}
#menu li a {
	float:left;
	padding:10px 20px 9px 20px;
	background:#eee;
}
#menu li a:hover {
	background:#eee;
}

Et sans plus de détails, voici le javascript :

$(document).mousemove(function(e){
	$(".close").stop(true,false).animate({top : (e.pageY - 15)},500)
});
$("#menu ul").hide();
$("#menu span").click(function(){
	$(this).removeClass('close');
	$("#menu ul").slideDown();
	$("#menu .opener").addClass('opened');
});
$("#menu").mouseleave(function(){
	$(this).addClass('close');
	$("#menu ul").slideUp();
	$("#menu .opener").removeClass('opened');
});

Ce qui est essentiel ici, c’est la petite fonction qui passe presque inaperçu ‘.pageY’ qui va nous renvoyer la position de notre souris (verticalement). Et grâce au ‘animate’, nous allons donner l’impression que le bloc suit la souris, n’oubliez pas le ’stop(true,false)’ pour la fonction se recharge au moindre déplacement.

Et voici le deuxième menu qu’on faisait il n’y a pas si longtemps que ça entièrement en flash, mais c’est beaucoup de contraintes, et javascript c’est quand même bien plus marrant, non ? :p

Voici la démo 2

Et la structure HTML du menu :


Et le CSS associé :

#container {
	position:relative;
	width:800px;
	margin:0 auto;
	padding:50px 20px;
	height:1200px;
	background:#fefefe;
	border:1px solid #eee;
	border-top:none;
	border-bottom:none;
}
#menu {
	position:absolute;
	width:100px;
	height:100px;
}
#menu a {
	float:left;
	width:32px;
	height:32px;
	position:absolute;
	display:none;
}
#menu a.home {
	background:url(../images/Home.png) no-repeat;
	top:80px;
	left:34px;
}
#menu a.about {
	background:url(../images/User.png) no-repeat;
	top:-20px;
	left:34px;
}
#menu a.folio {
	background:url(../images/Pictures.png) no-repeat;
	top:10px;
	left:75px;
}
#menu a.contact {
	background:url(../images/Chat.png) no-repeat;
	top:60px;
	left:75px;
}
#menu a.rss {
	background:url(../images/RSS.png) no-repeat;
	top:60px;
	left:-10px;
}
#menu a.links {
	background:url(../images/Address_Book.png) no-repeat;
	top:10px;
	left:-10px;
}
#menu a span {
	display:none;
	position:absolute;
	padding:3px 5px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	/*border-radius:4px;*/
	background:#666;
	color:#fff;
	top:-30px;
	z-index:9;
}
.note {
	background:#666;
	color:#fff;
	display:block;
	padding:5px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	/*border-radius:4px;*/
	width:110px;
}

Ici j’ai placé les images en absolue et j’ai indiqué leur position en top et left, mais j’aurais pu m’en passer puisque les icônes sont cachées et se positionnent grâce au javascript quand elles apparaissent.

Et le petit javascript qui va avec :

var winWidth = $(window).width();
	var contWidth = $("#container").width();
	var decalage = ((winWidth - contWidth) / 2);

	jQuery.fn.follow = function(){
		$(document).mousemove(function(e){
			$(".close").css({top : (e.pageY - 50), left : ((e.pageX - decalage)-30)});
		});
	};

	const mobil = 0;
	const arret = 1;
	var deplac = mobil;

	$("#menu").addClass('close').follow();

	$(window).keydown(function(event) {
		var arc_paramsHome = {
	    	center: [34,30],
	        radius: 50,
	        start: 0,
	        end: 1,
	        dir: -1
		}
		var arc_paramsAbout = {
	    	center: [34,30],
	        radius: 50,
	        start: 180,
	        end: 181,
	        dir: -1
		}
		var arc_paramsFolio = {
	    	center: [34,30],
	        radius: 50,
	        start: 120,
	        end: 121,
	        dir: -1
		}
		var arc_paramsContact = {
	    	center: [34,30],
	        radius: 50,
	        start: 60,
	        end: 61,
	        dir: -1
		}
		var arc_paramsRss = {
	    	center: [34,30],
	        radius: 50,
	        start: 300,
	        end: 301,
	        dir: -1
		}
		var arc_paramsLinks = {
	    	center: [34,30],
	        radius: 50,
	        start: 240,
	        end: 241,
	        dir: -1
		}

		$("#menu a").hover(function(){
			$(this).find("span").fadeIn();
		},function(){
			$(this).find("span").stop(true,true).fadeOut();
		});

		if (event.keyCode == '38') {
			if (deplac == mobil) {
				deplac = arret;
				$("#menu").removeClass('close');
				$("#bloc a").fadeIn(50);
				$("#menu .note").fadeOut();
				$("#menu a.home").animate({path : new $.path.arc(arc_paramsHome)},500);
				$("#menu a.about").animate({path : new $.path.arc(arc_paramsAbout)},500);
				$("#menu a.folio").animate({path : new $.path.arc(arc_paramsFolio)},500);
				$("#menu a.contact").animate({path : new $.path.arc(arc_paramsContact)},500);
				$("#menu a.rss").animate({path : new $.path.arc(arc_paramsRss)},500);
				$("#menu a.links").animate({path : new $.path.arc(arc_paramsLinks)},500);
			};
		};
	});
	$(window).keyup(function(event) {
		deplac = mobil;
		$("#bloc a").fadeOut(function(){
			$("#menu .note").fadeIn();
		});
		$("#menu").addClass('close');
	});

Comme ça il a l’air grand, mais c’est que je n’ai pas trouvé le moyen de réduire les variables de rotations.

On utilise les fameux .pageX et .pageY pour récupérer la position de la souris et on positionne le menu grâce à un ‘.css()’ qui nous repositionne la div en direct.

Alors le gros défaut de cette version pour le moment c’est qu’on ne peut pas cliquer sur les liens de la page même ou sélectionner un texte à cause de la div ‘note’ que j’ai mise pour indiquer quelle touche enfoncer. Mais il y a possibilité d’éviter ça, il suffit de ne pas mettre de note et d’indiquer la façon de procéder autrement.

J’espère que cet article vous inspirera, amusez-vous bien.

Animez des sprites avec CSS et jQuery et changez leurs états avec le clavier

Dimanche 11 avril 2010

Suite de l’article précédent pour une navigation web originale rappelant un jeu-vidéo. Cette fois nous allons voir les animations de sprites avec jQuery.

L’utilisation de gif est dure à gérée en cas de modification de l’animation, la qualité se fait au prix d’un poids excessif. La solution alternative est donc le sprite …euh non pas la boisson… Pour ceux qui ne connaissent pas, c’est une planche d’images sur laquelle on trouve tous les états d’une animation.

Dans notre exemple l’animation du personnage si on clique sur la droite ou la gauche, ce qui fait 4 animations du personnage en tout. Voyez plutôt :

La démonstration

Comme dans l’article précédent, la structure HTML est minimaliste :

Et le CSS également est très light :

body {
	margin:0;
}
#container {
	position:absolute;
	width:1000px;
	height:300px;
	background:#92d2ed;
}
#sol {
	position:absolute;
	width:2000px;
	height:36px;
	bottom:0;
	background:url(../images/sol.png) repeat-x;
	z-index:50;
}
#perso {
	position:absolute;
	width:61px;
	height:73px;
	background:url(../images/nu.png) -21px -128px no-repeat;
	top:195px;
	left:460px;
	z-index:40;
}

Et voici le javascript qui anime le personnage et permet de détecter le pressage de touches.
Nous utilisons le plugin de background position et le plugin timers, qui permet de remplacer les setTimeOut et setInterval.

$(document).ready(function() {
	jQuery.fn.arretDrt = function() {
		$(this).oneTime(200,function() {
			$(this).css({backgroundPosition:'-21px -128px'});
		}).oneTime(400,function() {
			$(this).css({backgroundPosition:'-121px -128px'});
		}).oneTime(600,function() {
			$(this).css({backgroundPosition:'-221px -128px'});
		}).oneTime(800,function() {
			$(this).css({backgroundPosition:'-121px -128px'});
		});
	};
	jQuery.fn.mouvArretDrt = function(){
		$(this).arretDrt();
		$(this).everyTime(800,function(){
			$(this).arretDrt();
		});
	}
	jQuery.fn.arretGch = function() {
		$(this).oneTime(200,function() {
			$(this).css({backgroundPosition:'-23px -28px'});
		}).oneTime(400,function() {
			$(this).css({backgroundPosition:'-123px -28px'});
		}).oneTime(600,function() {
			$(this).css({backgroundPosition:'-223px -28px'});
		}).oneTime(800,function() {
			$(this).css({backgroundPosition:'-123px -28px'});
		});
	};
	jQuery.fn.mouvArretGch = function(){
		$(this).arretGch();
		$(this).everyTime(800,function(){
			$(this).arretGch();
		});
	}
	jQuery.fn.marcheDrt = function() {
		$(this).oneTime(200,function() {
			$(this).css({backgroundPosition:'-18px -328px'});
		}).oneTime(400,function() {
			$(this).css({backgroundPosition:'-118px -328px'});
		}).oneTime(600,function() {
			$(this).css({backgroundPosition:'-218px -328px'});
		}).oneTime(800,function() {
			$(this).css({backgroundPosition:'-318px -328px'});
		});
	};
	jQuery.fn.mouvMarcheDrt = function(){
		$(this).marcheDrt();
		$(this).everyTime(800,function(){
			$(this).marcheDrt();
		});
	}
	jQuery.fn.marcheGch = function() {
		$(this).oneTime(200,function() {
			$(this).css({backgroundPosition:'-23px -228px'});
		}).oneTime(400,function() {
			$(this).css({backgroundPosition:'-123px -228px'});
		}).oneTime(600,function() {
			$(this).css({backgroundPosition:'-223px -228px'});
		}).oneTime(800,function() {
			$(this).css({backgroundPosition:'-323px -228px'});
		});
	};
	jQuery.fn.mouvMarcheGch = function(){
		$(this).marcheGch();
		$(this).everyTime(800,function(){
			$(this).marcheGch();
		});
	}
	$("#perso").mouvArretDrt();

	var arret = 0;

	$(window).keydown(function(event) {
		if (event.keyCode == '39') {
			if (arret == 0) {
				arret = 1;
				$("#perso").stopTime().removeClass('gch').mouvMarcheDrt();
			}
		}
		if (event.keyCode == '37') {
			if (arret == 0) {
				arret = 1;
				$("#perso").stopTime().addClass('gch').mouvMarcheGch();
			}
		}
	});
	$(window).keyup(function(event) {
		if (arret == 1) {
			arret = 0;
			$("#perso").stopTime().mouvArretDrt();
			$(".gch").stopTime().mouvArretGch();
		}
	});
});

J’ai posté cet article rapidement (je n’ai même pas fini d’habiller le personnage, qui utilise la base des personnages de Maple Story), j’éditerai pour plus de détails, et bientôt la suite pour aller plus loin dans la navigation façon jeu-vidéo.
Merci à Fabien pour les flags.

Une navigation web comme un jeu-vidéo avec jQuery et CSS.

Samedi 3 avril 2010

Bonjour tout le monde, ça faisait un moment que je n’avais pas posté, mais ceux qui suivent un peu mon actualité savent que je suis l’heureux papa d’une adorable petite fille dont voici le blog : Bonjour de Nina.

Pour ce retour, je vous présente une nouvelle idée que je compte utiliser pour un prochain site.
L’idée est assez simple, faire du site un véritable jeu. On oublie la souris et le côté ‘point and click’ des sites conventionnels et on transforme le curseur en un personnage qui va évoluer dans une page web construite comme un stage de Mario Bros ou ce que vous imaginerez.

Pour cet exemple, j’ai justement utilisé l’univers du célèbre plombier et un gameplay semblable : Avancer dans 2 directions et la possibilité de sauter. Ici les liens deviennent les blocs suspendus dans l’air, en les heurtant vous pourrez changer de page.

Voici la démonstration du site/jeu

Pour réaliser ce mini-jeu, nous allons comme toujours utiliser notre inépuisable bibliothèque jQuery et quelques plugins vraiment très utiles :

  • Le background position
  • Le plugin ‘easing’
  • Plugin pour des courbes
  • La structure HTML est vraiment minimale, on place tous les éléments composant la page en absolut afin d’intéragir facilement avec eux.

    Frappe-moi,j'suis un lien !
    Hit me,I'm a link !
    Retour /Go back.

    Et le CSS qui va avec, rien de compliqué, on positionne nos éléments comme on souhaite les voir apparaître, même si c’est surtout le javascript qui va faire tout le boulôt.

    body {
    	margin:0;
    	font-size:9px;
    	font-family:Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
    #container {
    	width:1000px;
    	height:450px;
    	margin:0 auto;
    	position:relative;
    	background:#cbefff url(../images/decor.png) 0px 500px no-repeat;
    	overflow:hidden;
    }
    #perso {
    	position:absolute;
    	width:30px;
    	height:44px;
    	top:377px;
    	left:100px;
    	background:url(../images/mario.png) 0px 0px no-repeat;
    	overflow:hidden;
    }
    .case {
    	position:absolute;
    	width:43px;
    	height:35px;
    	background:url(../images/case.png) no-repeat;
    	top:268px;
    }
    .c1 { left:461px; }
    .c2 { left:791px; }
    .c3 { left:891px; }
    #legend {
    	position:absolute;
    	width:147px;
    	height:97px;
    	background:url(../images/legend.png) no-repeat;
    	top:20px;
    	left:20px;
    }
    .smile {
    	width:95px;
    	height:51px;
    	padding-top:50px;
    	text-align:center;
    	position:absolute;
    	background:url(../images/smile.png) no-repeat;
    	top:150px;
    }
    .s1 { left:435px; }
    .s2 { left:765px; }
    .s3 { left:865px; }
    

    Voyons sans plus attendre le coeur du sujet, le javascript. Je vais détailler les 2 parties principales du script, la mise en place du décor et les évènements de navigations.
    En effet, il fallait une petite introduction sympa à cette page, alors tous les éléments sont positionnés avec des animate et compagnie.

    $("#container").delay(1000).animate( /*Noté le 'delay', très pratique pour faire une pause.*/
    	{"backgroundPosition": "0px 0px"},
    	{
    		duration: 800,
    		easing: 'easeOutBounce' /*L'effet de rebondissement*/
    	});
    
    $(".case").css({top:-100});
    $(".case").delay(1200).animate(
    	{top:268},
    	{
    		duration: 1000,
    		easing: 'easeOutBounce'
    	});
    $("#perso").delay(1600).css({top:-100});
    $("#perso").delay(500).animate(
    	{top:377},
    	{
    		duration: 1000,
    		easing: 'easeOutBounce'
    	});
    $("#legend").hide().delay(1500).fadeIn(500);
    setInterval (function(){ /*Va nous permettre de faire tourner en boucle cette animation*/
    	$(".smile").animate({top:140},800).animate({top:150},800);
    },1600);
    $(".smile").hide().css({top:170}).delay(2000).fadeIn(200);
    

    Il est possible de réaliser tout une animation linéaire d’introduction grâce au javascript, et pourquoi pas faire tout un dessin animé ? :)

    Voici la partie ‘intéractive’ du javascript, c’est à dire à partir du moment où on presse une touche du clavier. Dans notre exemple seulement 3 touches entrainent des animations, nous allons donc utiliser de multiples conditions.
    Ce qui est important dans la plupart des jeux, ce sont les collisions entre les éléments. Ici nous n’allons pas vraiment en faire, nous allons les simuler en récupérant la position du personnage, et s’il se trouve à certains endroits quand il saute, nous saurons qu’il doit entrer en contact avec les cases.

    $(window).keydown(function(event) { /*Dès qu'une touche du clavier est enfoncée...*/
    	var pos = $("#perso").position().left; /*Cette variable récupère la position du personnage*/
    
    	if (event.keyCode == '39') { /*Si la flèche de droite est enfoncée*/
    		if ((pos > -10) && (pos < 970)) { /*Pour que le personnage ne sorte pas du champ*/
    			$("#perso")
    			.removeClass("dos") /*Si le personnage était dans l'autre direction*/
    			.css({
    				backgroundPosition: '0px 0px'
    			}).animate({ /*On le déplace vers la gauche*/
    				left: '+=5'
    			}, 20, "linear");
    		}
    	}
    	if (event.keyCode == 37) { /*Si on presse la flèche de gauche*/
    		if ((pos > 0) && (pos < 980)) {
    			$("#perso")
    			.addClass("dos")
    			.css({
    				backgroundPosition: '0px -44px'
    			}).animate({
    				left: '-=5'
    			}, 20, "linear");
    		}
    	}
    
    	var bezier_paramsdos = { /*Les variables pour gérer les courbes des sauts*/
    	    start: {
    	      x: pos,
    	      y: 377,
    	      angle: 350
    	    },
    	    end: {
    	      x: pos - 60,
    	      y: 377,
    	      angle: 100,
    	      length: -4
    	    }
    	}
    	var bezier_params = {
    	    start: {
    	      x: pos,
    	      y: 377,
    	      angle: 10
    	    },
    	    end: {
    	      x: pos + 60,
    	      y: 377,
    	      angle: 80,
    	      length: 4
    	    }
    	}
    
    	if (event.keyCode == '38') { /*Si on presse la flèche du haut*/
    		if ($("#perso").hasClass("dos")) { /*Si le personnage est tourné vers la gauche*/
    			if ((pos > 60) && (pos < 980)) {
    				if ((pos < 511) && (pos > 461)) { /*Si le saut est effectué dans cette zone il 'heurtera' une case*/
    					$(".c1").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/wp-content/themes/default/tuto/game/test_navig.html");
    					}); /*A la fin de l'animation, réorientation de la page.*/
    				};
    				if ((pos < 841) && (pos > 791)) { /*Si le saut est effectué dans cette zone il 'heurtera' une case*/
    					$(".c2").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/wp-content/themes/default/tuto/game/test_navig.html");
    					});
    				};
    				if ((pos < 941) && (pos > 891)) { /*Si le saut est effectué dans cette zone il 'heurtera' une case*/
    					$(".c3").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/?p=244");
    					});
    				};
    				$("#perso").stop(true, true).css({
    						backgroundPosition: '-30px -44px'
    					}).animate({
    					path: new $.path.bezier(bezier_paramsdos)
    				}, 500,function(){
    					$("#perso").css({backgroundPosition:'0px -44px'})
    				});
    			}
    		}
    		else {
    			if ((pos > 0) && (pos < 920)) { /*Si le personnage est tourné dans l'autre direction*/
    				if ((pos > 411) && (pos < 461)) {
    					$(".c1").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/wp-content/themes/default/tuto/game/test_navig.html");
    					});
    				};
    				if ((pos > 741) && (pos < 791)) {
    					$(".c2").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/wp-content/themes/default/tuto/game/test_navig.html");
    					});
    				};
    				if ((pos > 841) && (pos < 891)) {
    					$(".c3").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/?p=244");
    					});
    				};
    				$("#perso").stop(true, true).css({
    						backgroundPosition: '-30px 0px'
    					}).animate({
    					path: new $.path.bezier(bezier_params)
    				}, 500,function(){
    					$("#perso").css({backgroundPosition:'0px 0px'})
    				});
    			}
    		}
    	}
    });
    

    Voici pour cette première approche des sites/jeux. La prochaine étape va être d'animer les personnages lorsqu'ils se déplacent, et au lieu d'utiliser des gifs, nous le ferons avec des sprits et du javascript bien sûr. ;)
    Puis nous tenterons de corser un peu la chose avec des monstres à éviter ou à anéantir... Bref, beaucoup de choses en perspective.
    A bientôt.

Un sous-menu eXtra Large avec jQuery

Samedi 6 mars 2010

Assez des menus déroulants qui se positionnent au-dessus des contenus et souvent peu esthétiques ? Je vous propose un petit tutoriel pour faire un sous-menu qui donnera une autre dimension à vos pages.

Beaucoup de sites utilisent une large bande qui court de gauche à droite avec souvent une liste de liens les uns à côté des autres et la technique la plus utilisée pour faire des sous-menu est un menu déroulant qui vient couler sous le lien en superposant au contenu du dessous. Personnellement, je trouve cela pas très agréable graphiquement ou dans de rares cas. Voici un article sur le sujet sur Smashing Magazine.

J’ai déjà expérimenté le menu que je vais vous présenter sur un site qui sera bientôt ajouté dans le portfolio, mais il était plus complexe grâce au concours du légendaire Fabien, qui si il passe par ici, ne me maudira pas trop en voyant cet article j’espère. En effet il existe de nombreuses façon de réaliser cet effet et la mienne n’est surement pas la plus optimisée, mais elle a le mérite de fonctionner.

Voici la démonstration du menu
Et le pack à télécharger.

Dans cet exemple il faudra cliquer sur le lien pour faire apparaître le sous menu et le fermer, mais il serait tout à fait possible de faire l’effet en hover.

Rentrons un peu dans les détails de la structure de ce menu. L’idée est de repousser tout le contenu de la page pour faire apparaître le sous-menu.
La méthode que j’ai utilisé est de créer des zones pour chaque parties de la structure, une pour le header (menu principal), une pour le sous-menu et enfin une pour le contenu.
La seule complexité étant que j’ai associé le sous-menu à la liste du menu principal, donc la zone du menu est vide… Voyez plutôt la structure HTML :


fleur

Le menu large

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

On distingue bien les 3 zones de la page.
Pour bien positionner les div du sous-menu, nous allons la placer en absolute par rapport au header et de façon à ce qu’elles se retrouvent juste sous le menu principal. Le menu principal est donc placé avec un float:right et l’autre avec un right:0. Les boutons pourront donc s’étaler sur toute la largeur de la page.

Voici d’ailleurs le CSS complet :

/*-----------------Patie générique------------------*/
body {
	margin:0;
	font-family:Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
}
h2 { margin-top:0; }
a {
	text-decoration:none;
	outline:none;
}
ul {
	padding:0;
	margin:0;
}
li { list-style:none; }
a.titre {
	float:left;
	width:180px;
	color:#6d8a20;
	font-size:36px;
	line-height:48px;
	font-weight:normal;
}
/*-----------------Patie menu principal------------------*/
#wrap_header {
	width:100%;
	height:50px;
	background:#91b439;
	border-top:1px solid #aad246;
	border-bottom:1px solid #6d8a27;
}
#header {
	width:950px;
	height:50px;
	margin:0 auto;
	position:relative;
}
#header ul {
	float:right;
	border-left:1px solid #6d8a27;
	border-right:1px solid #aad246;
}
#header li {
	padding:0;
	float:left;
	height:50px;
	line-height:50px;
	border-left:1px solid #aad246;
	border-right:1px solid #6d8a27;
}
#header li a {
	display:block;
	color:#fff;
	padding:0 30px;
	height:50px;
}
#header li a.down {
	padding-left:40px;
	background:url(../images/puce.gif) 20px center no-repeat;
}
#header li a:hover { background:#aad246; }
#header li a.down:hover,
#header li a.active { background:#aad246 url(../images/puce.gif) 20px center no-repeat; }

/*-----------------Patie sous-menu------------------*/
#header li div {
	position:absolute;
	top:52px;
	right:0;
}
#header li div ul {
	border:none;
	border-left:1px solid #fff;
	margin-left:0;
}
#header li div li {
	border:none;
	border-right:1px solid #fff;
}
#header li div a {
	height:20px;
	line-height:20px;
	color:#474747;
	height:49px;
	line-height:49px;
	float:left;
}
#header li div a:hover {
	background:none;
	color:#6d8a27;
}

#wrap_menu {
	width:100%;
	height:0px;
	background:#ddd;
}
/*-----------------Patie Contenu------------------*/
#wrap_body {
	width:100%;
	background:url(../images/degr.png) repeat-x;
	height:200px;
	border-top:1px solid #fff;
}
#body {
	width:950px;
	margin:0 auto;
	padding:30px 0;
}
#body img {
	float:right;
	margin-left:10px;
}

Rien de bien compliqué. Alors je passe au javascript que j’ai commenté au fur et à mesure (il utilise jQuery qu’il faudra appeler bien sûr) :

$(document).ready(function () {
	$("#header li div").hide(); //Cache les sous-menus

	$(".down").click( function (){ //Quand on clique sur les liens avec la class 'down'
		if ($(this).next("div").hasClass ("open")) { //Si le sous-menu du lien cliqué est ouvert
			$(this).removeClass ("active"); //On retire la class active du lien
			$(this).next("div").removeClass ("open").stop(true, true).fadeOut ( function () { //On retire la class open du sous-menu et on le fait disparaître
				$("#wrap_menu").animate ({ //Puis on ferme l'espace sous-menu
					height: 0 + "px"
				}, 500);
			});
		}
		else { //Si le sous-menu n'est pas ouvert
			if ($("#header li div").hasClass ("open")) { //Mais qu'un autre sous-menu est ouvert
				$(".active").removeClass ("active"); //On retire la class active de l'autre lien
				$(this).addClass ("active"); //Qu'on place sur celui-ci
				$(".open").fadeOut ("fast").removeClass ("open"); //On fait disparaître l'autre sous-menu et on retire sa class open
				$(this).next("div").addClass ("open").fadeIn("slow"); //Et on fait apparaître celui ciblé
			}
			else { //Si aucun sous-menu n'est ouvert
				$(this).addClass("active"); //On ajoute la class active au lien
				$(this).next("div").addClass ("open").fadeIn(2000); //Et la class open au sous-menu qu'on fait apparaître
				$("#wrap_menu").animate({ //En même temps on ouvre l'espace sous-menu
					height: 50 + "px"
				}, 500);
			}
		}
		return false; //'Désactive' les liens du menu principal avec la class down
	});
});

menu

J’espère que cet article vous aura inspiré, et si vous avez d’autres façons de faire ce menu XL, n’hésitez pas à les partager !
A bientôt !

Une galerie scrollable draggable avec jQueryUI

Mardi 2 mars 2010


Un script détaillé de A à Z, pour construire une petite galerie d’image dont on déplace les images en les faisant glisser.

On m’a fait la remarque que les scrollable dans les festins de webdesign et sur le portfolio n’était pas visible, alors j’ai cherché un autre moyen de faire ces galeries. Aujourd’hui nous allons détailler l’intégration d’une galerie, dont le système se rapproche du carrousel mais qui ne fait pas de boucle (à voir dans une prochaine version peut-être) et qui au lieu de cliquer, s’anime en ‘draggant’ les images.

Tout d’abord rendez-vous sur le site de jQuery si vous souhaitez en savoir plus sur cette fabuleuse bibliothèque javascript.
Puis faites un tour sur jQuery UI pour approfondir et multiplier les possibilités d’animations.

Attaquons maintenant notre tutoriel :
La démonstration
Le pack à télécharger

Commençons par notre page HTML, et en particulier les appels javascript, ici nous pointons vers les versions jQuery en ligne, mais vous pouvez les télécharger sur le site. settings.js sera le script dans lequel on va mettre notre code.




Et dans le body voici la structure simplicime autour de laquelle nous allons construire notre galerie. Une liste, une classe, peut-on faire plus simple ?

Avec si peu de HTML, le CSS n’est pas copieux non plus :

body {
	margin:0;
	background:#eee;
}
#container {
	width:709px;
	margin:100px auto;
}
.images {
	margin:0;
	padding:0;
}
.images li {
	list-style:none;
	padding:0;
	margin:0;
	float:left;
	width:709px;
	height:500px;
	cursor:e-resize; /*On détourne ce picto pour signaler la possibilité de déplacer*/
}

A ce stade vous devez avoir une belle liste d’image les unes en dessous des autres.
Nous allons maintenant attaquer le coeur de cet article, le script. Je vous le commente au fur et à mesure pour bien détailler chaque étape.

$(document).ready(function () {
    Vignette = $(".images li:visible"); //On prend cette vignette comme repère
    NbVignette = $(".images li").length; //On cacule le nombre de vignette

	$(".images")
	    .wrap(' ici vous ouvrez et fermez une balise div avec la classe .scrollable ') //On encadre la liste d'une div
	    .css("width", (Vignette.width() * NbVignette) ); //et on élargi la liste en fonction du nombre de vignettes

	$(".scrollable") //On définit les attributs de la div
	    .width( Vignette.width() )
	    .height( Vignette.height() )
	    .css("overflow", "hidden")

    i = 0; //Ce chiffre va nous permettre de savoir quelle vignette afficher
	var position = 0;

	$(".images").draggable({
		axis: 'x', //sur l'axe horizontal
		distance: 30, //Il faut déplacer l'image sur au moins 30 pixels

		stop: function(event, ui) { //à la fin du drag
			if(ui.position.left < position) { //si la position est négative par rapport à la précédente
				if (i < (NbVignette - 1)) { //si on n'est pas à la dernière vignette
				 	i++;
					position = -(Vignette.width() * i);
				 	$(".images").animate({
				 		left: position
				 	});
				}
				else { // Si on on est à la dernière vignette
					$(".images").animate({
						left: position
					});
				}
	        }
			else { //si la position est positive par rapport à la précédente
				if(i > 0) { //Si on n'est pas à la première vignette
					i--;
					position = -(Vignette.width() * i);
					$(".images").animate({
						left: position
					});
				}
				else { // Sinon on est à la première vignette
					$(".images").animate({
						left: position
					});
				}
	        }
        }
    });
});

Voilà ce n’était pas bien long.
Merci Fabien pour ta modification, l’effet est encore meilleur !

J’espère que ça vous a plu, à bientôt pour des nouveaux trucs.