Crea un modulo di accesso incredibile con jQuery

Una lotta che rimane ancora oggi nel web design è la visualizzazione di tutte le informazioni ridondanti su ogni pagina. Ad esempio, un modulo di accesso. Cosa accadrebbe se ci fosse un modo per rendere facilmente accessibile il contenuto su ogni pagina, ma tenerlo nascosto fino al momento necessario? Beh, è possibile, creando un pannello superiore che, una volta fatto clic, rivelerà se stesso e il suo contenuto. Ma dobbiamo renderlo bello, quindi lo animeremo anche noi.

In questo tutorial creeremo un pannello scorrevole, che scorre all'interno per rivelare di più
contenuto, usando JQuery per animare l'altezza del pannello. In questo caso, lo faremo
stai creando un ipotetico login per la nuova area tutsplus che arriverà presto.

Passaggio 1: Photoshop Layout

Per prima cosa dobbiamo pianificare il layout e renderlo bello con Photoshop. Grazie
a Collis e alle sue fantastiche abilità di Photoshop, abbiamo un layout perfetto con cui lavorare.
Puoi prendere il file PSD prima e dopo per un'ulteriore ispezione nella fonte
file zip. Ma è piuttosto evidente. Non ha nemmeno gradienti, quindi
dovremmo riuscire a farlo abbastanza facilmente solo con i CSS.

Qui puoi vedere come sarà la demo al suo stato normale.

Ecco come apparirà la demo quando il pannello viene fatto scorrere.

Passaggio 2: pianificazione della struttura

Prima di tutto, abbiamo bisogno di costruire la struttura della pagina. Per creare il layout sopra,
cosa abbiamo tutti bisogno strutturalmente nell'HTML?

Prima di tutto, abbiamo bisogno di un'intestazione che si estenda su tutta la larghezza della pagina.

Avremo anche bisogno di un pannello superiore, che per ora faremo finta di essere espanso in modo permanente
fino a quando non inseriremo il JQuery.

Avremo bisogno di un'area per il normale contenuto della pagina.

Infine avremo bisogno di un'interruzione visiva tra l'intestazione e il contenuto della pagina, che
ci riusciremo attraverso un righello orizzontale (hr).

Bene, quindi il layout della pagina è piuttosto semplice. Ecco qui:


  
       Questo div servirà come sfondo del pannello
 
 Accedi qui
  Nascondere

Tutto il contenuto andrà qui

Wow ... senza classi o contenuti all'interno, sembra un sacco di divs inutili,
ma tutto sarà necessario per il CSS e JQuery in seguito. Ora inizieremo ad aggiungere
classi in preparazione per il CSS.

Passaggio 3: preparazione CSS: classi e ID

Ora dobbiamo cambiare lo scheletro in un vero sito con i CSS. Bene
inizia aggiungendo classi e ID a tutte quelle div! Puoi farlo facilmente
stampando il layout di Photoshop e quindi contrassegnando le aree e associate
classi con un sharpie. Per questa dimostrazione, farò lo stesso solo in Photoshop.
Anche se può essere estremamente brutto, si spera che ti mostrerà le diverse regioni
della pagina.

Nota: ho intenzione di avere l'immagine normale non evidenziata al passaggio del mouse.

Ecco la pagina con le classi e gli ID aggiunti:

 
 
     
 
 Accedi qui
 Nascondere

Al momento, ti mostrerò uno screenshot di quello che abbiamo finora, ma non lo facciamo
avere qualcosa tranne un righello orizzontale e due collegamenti senza stile. Hai un'idea.
Ora possiamo modellare la pagina.

Passaggio 4: collegamento dei file insieme

Prima di andare avanti, dobbiamo introdurre il file CSS nello scheletro.
Ho creato un foglio di stile intitolato "style.css". Mentre stiamo aggiungendo il codice
alla testa, potremmo anche aggiungere javascript e jQuery. Ecco il
capo della pagina:

 Pannello scorrevole JQuery di Nettuts

Codice