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 class="panel">
  <form action="" class="login" id="login">
    <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>
<button class="slide">Se connecter</button>

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.

.panel {
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0;
  border-radius: 0 0 10px 10px;
  background-color: #ccc;
  display: none;
  margin: 0 auto;
  padding: 30px;
  width: 300px;
}

.slide {
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0;
  border-radius: 0 0 10px 10px;
  background: #ff0000;
  color: #fff;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  padding: 10px;
  width: initial;
}

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.

jQuery(document).ready(function($){
    $(".slide").on("click", function(event) {
        event.preventDefault();
        $(this).prev(".panel").slideToggle("slow");
        $(this).toggleClass("active");
    });
});

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

Fichiers sources

Voir la démo ou Télécharger les fichiers.