Bygg en utrolig innloggingsskjema med jQuery

En kamp som fortsatt er i dag i webdesign, viser all overflødig informasjon på hver side. For eksempel, et påloggingsskjema. Hva om det var en måte å enkelt gjøre innholdet tilgjengelig på hver side, men hold det skjult før det trengs? Vel du kan, ved å lage et topppanel som når du klikker, vil avsløre sitt eget og dets innhold. Men vi må gjøre dette ser bra ut, så vi vil også animere det.

I denne opplæringen lager vi et skyvepanel som glir inn for å avsløre mer
innhold, ved hjelp av JQuery å animere høyden på panelet. I dette tilfellet vil vi
skape en hypotetisk pålogging for det nye tutsplus-området som kommer snart.

Trinn 1 - Photoshop Layout

Først må vi planlegge ut vårt oppsett og få det til å se kult ut med Photoshop. Takk
til Collis, og hans fantastiske Photoshop-ferdigheter, har vi en slick layout for å jobbe med.
Du kan hente før og etter PSD-filen for videre inspeksjon i kilden
zip-fil. Men det er ganske selvfølge. Det har heller ingen gradienter heller
vi burde kunne gjøre dette ganske enkelt bare med CSS.

Her kan du se hvordan demoen vil se ut i sin normale tilstand.

Her er hva demoen vil se ut når panelet glir ned.

Trinn 2 - Planlegger strukturen

Først må vi bygge sidens struktur. For å lage oppsettet ovenfor,
Hva trenger vi alle strukturelt i HTML-en?

Først av, vi trenger en header, som strekker seg over hele bredden på siden.

Vi trenger også et topppanel, som for øyeblikket vil late som om det er permanent utvidet
til vi setter inn JQuery.

Vi trenger et område for det vanlige innholdet på siden.

Til slutt trenger vi en visuell pause mellom topptekst og sideinnhold, som
Vi vil oppnå gjennom en horisontal linjal (hr).

OK, så utformingen av siden er ganske enkel. Her er det:


  
       Denne diven vil fungere som bakgrunnen til panelet
 
 Logg inn her
  Gjemme seg

Alt innholdet vil gå her

Wow ... uten klasser eller noe innhold inni, ser det ut som mange meningsløse divs,
men alt vil være nødvendig for CSS og JQuery senere. Nå begynner vi å legge til
klasser som forberedelse til CSS.

Trinn 3 - CSS forberedelse: Klasser & ID

Nå må vi bytte skjelettet til et faktisk nettsted med CSS. Vi vil
Start med å legge til klasser og ID'er til alle disse divs! Du kan gjøre dette enkelt
ved å skrive ut Photoshop-oppsettet og markere områdene og tilhørende
klasser med en sharpie. For denne demonstrasjonen vil jeg gjøre det samme bare i Photoshop.
Selv om det kan være ekstremt stygg, vil det forhåpentligvis vise deg de forskjellige regionene
av siden.

Merk: Jeg planlegger å ha det normale ikke-fremhevede bildet på svingeren.

Her er siden med de tilføyde klassene og ID-ene:

 
 
     
 
 Logg inn her
 Gjemme seg

Akkurat nå vil jeg vise deg et skjermbilde av hva vi har så langt, men det gjør vi ikke
ha noe unntatt en horisontal linjal og to ustylte lenker. Du får ideen.
Nå kan vi stile siden.

Trinn 4 - Kobling av filene sammen

Før vi går videre, må vi presentere CSS-filen til skjelettet.
Jeg opprettet et stilark med tittelen "style.css". Mens vi legger til kode
til hodet kan vi også legge til javascript og jQuery også. Her er
leder av siden:

 Netuts JQuery Skyvepanel

Kode