Accentsconagua

Construiți un formular de conectare incredibil cu jQuery

Cod
Share

O luptă care rămâne în prezent în designul web afișează toate informațiile redundante pe fiecare pagină. De exemplu, un formular de autentificare. Ce se întâmplă dacă a existat o modalitate de a face cu ușurință conținutul accesibil pe fiecare pagină, dar păstrați-l ascuns până când este necesar? Ei bine, puteți face un panou de top care, atunci când se face clic, va dezvălui sinele și conținutul său. Dar trebuie să facem acest aspect frumos, așa că o vom anima și el.




În acest tutorial, vom crea un panou glisant, care se alunecă pentru a dezvălui mai multe
conținut, folosind JQuery pentru a anima înălțimea panoului. În acest caz, o vom face
creați o înregistrare ipotetică pentru noul domeniu tutsplus care vine în curând.

Pasul 1 - Layout Photoshop

Mai intai trebuie sa planificam aspectul nostru si sa facem sa arate bine cu Photoshop. Mulțumiri
la Collis, și abilitățile sale uimitoare Photoshop, avem un aspect șic cu care să lucrăm.
Puteți lua fișierul înainte și după PSD pentru o inspecție suplimentară în sursă
fișier Zip. Dar este destul de evident. De asemenea, nu are declivități
ar trebui să putem face acest lucru destul de ușor doar cu CSS.

>

Aici puteți vedea ce va arăta demo-ul în starea sa normală.

>

Iată ce va arăta demo-ul atunci când panoul este alunecat.

Pasul 2 - Planificarea structurii

În primul rând, trebuie să construim structura paginii. Pentru a crea planul de mai sus,
ceea ce avem nevoie de toate în mod structural în HTML?

  • În primul rând, avem nevoie de un antet care să se extindă pe întreaga lățime a paginii.
  • Vom avea nevoie, de asemenea, de un panou de top, care pentru moment, vom pretinde că este extins permanent
    până când introducem JQuery.
  • Avem nevoie de o zonă pentru conținutul normal al paginii.
  • În cele din urmă, vom avea nevoie de o pauză vizuală între antetul și conținutul paginii, care
    vom realiza printr-o riglă orizontală (hr).

    • Bine, aspectul paginii este destul de simplu. Aici este:

      
      
      
      
     Acest div va servi ca fundal al panoului
    Tot conținutul va merge aici

    Wow ... fără clase sau conținut înăuntru, se pare că au o mulțime de idei inutile,
    dar toate vor fi necesare pentru CSS și JQuery mai târziu. Acum vom începe să adăugăm
    cursuri în pregătire pentru CSS.

    Pasul 3 - Pregătirea CSS: Clasele și ID-urile

    Acum trebuie să schimbăm scheletul într-un site real cu CSS. Bine
    începe prin adăugarea de clase și ID-uri la toate aceste divs! Puteți face acest lucru cu ușurință
    prin imprimarea layout-ului Photoshop și apoi marcarea suprafețelor și asociate
    clase cu o ascuțită. Pentru această demonstrație, voi face același lucru numai în Photoshop.
    Deși poate fi extrem de urât, sperăm că vă va arăta diferitele regiuni
    a paginii.

    >

    Notă: Am de gând să aibă imaginea normal non-evidențiat pe hover.

    Aici este pagina cu clasele adăugate și ID-urile:

     
     
     
     
     
     
     
     
     
    Autentifică-te aici
     
    Ascunde

    Chiar acum, ți-aș arăta o captură de ecran a ceea ce avem până acum, dar nu o facem
    au nimic, cu excepția unui conducător orizontal și a două legături nestingherite. Ai idee.
    Acum putem modela pagina.

    Pasul 4 - Legarea fișierelor împreună

    Înainte de a merge mai departe, trebuie să introducem fișierul CSS pe schelet.
    Am creat o foaie de stil intitulată "style.css". În timp ce adăugăm cod
    la cap, am putea adăuga și javascript și jQuery. Aici este
    capul paginii:

     Nettuts JQuery Panou glisant
    Cod
    ×