Créer un panneau de Login coulissant avec jQuery

loginpanel

Comme premier article pour cette nouvelle année 2010 (bonne année à tous d’ailleurs!), j’ai décidé de vous proposer un tutoriel très simple pour créer une zone de login coulissante grâce à la librairie javascript jQuery.

L’idée ici, c’est de pouvoir faire apparaitre un panneau au clic sur un bouton. Ce panneau qui coulisserai vers le bas depuis le « header » du site afficherai un formulaire pour permettre aux utilisateurs du site de se connecter à leur espace personnel. On pourrait croire qu’il serai difficile de réaliser un tel effet. Eh bien non! Grâce à notre feuille de style et un tout petit peu de javascript en utilisant jQuery, l’effet est simple à réaliser, et tout n’est ensuite qu’une question de style :) .

Avant de commencer, vous pouvez jeter un oeil sur le rendu final (pour un meilleur rendu, utilisez les navigateurs Chrome, Firefox 3.5 ou Safari 4).

Le marquage HTML

Maintenant qu’on a vu quel était notre but, passons au code HTML de notre panneau de login. Je ne vais pas expliquer le code, c’est un formulaire basique encapsulé dans un bloc, suivi d’un lien lui même encapsulé dans un bloc de paragraphe.

<div id="login_panel">
	<form name="login_form" id="login_form" method="post" action="" >
		<label for="username">Nom d'utilisateur:</label>
		<input type="text" name="username" id="username" />
		<label for="password">Mot de passe:</label>
		<input type="password" name="password" id="password" />
		<input type="submit" name="submit" id="submit" value="Connexion" />
	</form>
</div><!-- #login_panel -->
<p class="slide"><a href="#" class="slide_btn">Se connecter</a></p>

Voilà, on ne peut vraiment pas faire plus simple.

Les styles CSS

Maintenant, passons à notre feuille de style. Je ne mettrai ici que les propriétés importantes à la réalisation de l’effet, pour ne pas vous embêter avec le superflux, cependant le code complet sera disponible au téléchargement à la toute fin de l’article.

#login_panel {
	width: 400px;
	margin: 0 auto;
	padding: 30px;
	background: #cccccc;
	display: none; //état initial du panneau : caché
}
.slide_btn {
	width: 140px;
	height: 15px;
	margin: 0 auto;
	padding: 10px;
	text-align: center;
	background: #ff0000;
	display: block;
}
.slide {
	margin: 0;
	padding: 0;
}

Le script jQuery

Maintenant qu’on a définit notre marquage HTML et les styles à lui appliquer, il ne reste plus qu’à l’animer grâce à jQuery.

$(document).ready(function(){
	$(".slide_btn").click(function(){
		$("#login_panel").slideToggle("slow");
		return false;
	});
});

Et voilà, votre panneau de login est terminé!

Télécharger les sources

Voir une démo Télécharger les fichiers sources

Sur le même sujet

Laisser un commentaire