Archive pour mars 2010

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.

Festin de Webdesign #2

Lundi 1 mars 2010

Une nouvelle galerie de sites remarquables pour se régaler les yeux et savourer de délicieuses mises en page. Bon appétit.

Catfish Deluxe Le site

gdzilla Smash Le site

Fubiz Interactive Le site

Tori’s Eye Le site

NewGenCoal Le site

Cliframework Le site