Construire un formulaire de connexion incroyable avec jQuery

Une des difficultés qui subsiste encore aujourd'hui dans la conception Web consiste à afficher toutes les informations redondantes sur chaque page. Par exemple, un formulaire de connexion. Et s'il y avait un moyen de rendre facilement le contenu accessible sur chaque page, tout en le cachant jusqu'à ce que vous en ayez besoin? Eh bien, vous pouvez créer un panneau supérieur qui, une fois cliqué, révélera son identité et son contenu. Mais nous devons faire en sorte que ce soit joli, donc nous allons aussi l'animer.

Dans ce tutoriel, nous allons créer un panneau coulissant, qui se glisse pour révéler plus de
contenu, en utilisant JQuery pour animer la hauteur du panneau. Dans ce cas, nous allons
créer un identifiant hypothétique pour la nouvelle zone tutsplus à venir.

Étape 1 - Mise en page de Photoshop

Nous devons d’abord planifier notre mise en page et la rendre cool avec Photoshop. Merci
à Collis, et ses incroyables compétences de Photoshop, nous avons une mise en page lisse pour travailler avec.
Vous pouvez récupérer le fichier PSD avant et après pour un contrôle ultérieur dans la source.
fichier zip. Mais c'est assez évident. Il n'y a pas de gradients non plus, donc
nous devrions pouvoir le faire assez facilement avec CSS.

Ici vous pouvez voir à quoi ressemblera la démo dans son état normal.

Voici à quoi ressemblera la démo lorsque le panneau sera abaissé.

Étape 2 - Planification de la structure

Tout d'abord, nous devons construire la structure de la page. Pour créer la mise en page ci-dessus,
de quoi avons-nous tous besoin structurellement dans le HTML?

Tout d'abord, nous avons besoin d'un en-tête, qui s'étend sur toute la largeur de la page..

Nous aurons également besoin d'un panneau supérieur, qui pour l'instant, nous allons prétendre est élargi en permanence
jusqu'à ce que nous insérons le JQuery.

Nous aurons besoin d'un espace pour le contenu de la page normale.

Enfin, nous aurons besoin d’une rupture visuelle entre l’en-tête et le contenu de la page, ce qui
nous accomplirons à travers une règle horizontale (heure).

Bon, donc la mise en page de la page est assez simple. C'est ici:


  
       Cette div servira d'arrière-plan du panneau
 
 Connectez-vous ici
  Cacher

Tout le contenu ira ici

Wow… sans cours ni contenu à l'intérieur, cela ressemble à beaucoup de divs inutiles,
mais tout sera nécessaire pour CSS et JQuery ultérieurement. Maintenant, nous allons commencer à ajouter
cours en préparation au CSS.

Étape 3 - Préparation CSS: Classes et identifiants

Nous devons maintenant changer le squelette en un site réel avec CSS. Bien
commencez par ajouter des classes et des identifiants à tous ces divs! Vous pouvez le faire facilement
en imprimant la mise en page de Photoshop, puis en marquant les zones et associés
cours avec un sharpie. Pour cette démonstration, je ferai la même chose que dans Photoshop.
Même si cela peut être extrêmement laid, espérons-le, il vous montrera les différentes régions
de la page.

Remarque: je prévois d'avoir l'image normale non surlignée en survol..

Voici la page avec les classes et les ID ajoutés:

 
 
     
 
 Connectez-vous ici
 Cacher

Pour le moment, je vous montrerais une capture d'écran de ce que nous avons jusqu'à présent, mais nous ne le faisons pas.
avoir autre chose qu'une règle horizontale et deux liens non stylés. Vous avez eu l'idée.
Maintenant on peut styler la page.

Étape 4 - Lier les fichiers ensemble

Avant d'aller plus loin cependant, nous devons introduire le fichier CSS dans le squelette.
J'ai créé une feuille de style intitulée "style.css". Pendant que nous ajoutons du code
à la tête, nous pourrions aussi bien ajouter le javascript et jQuery. Voici la
tête de la page:

 Nettuts JQuery Panneau coulissant

Code