Accentsconagua

Bouw een ongelofelijk inlogformulier met jQuery

Code
Share

Eén worsteling die vandaag de dag nog steeds bestaat in webdesign, is het weergeven van alle overtollige informatie op elke pagina. Bijvoorbeeld een inlogformulier. Wat als er een manier was om de inhoud eenvoudig toegankelijk te maken op elke pagina, maar verborgen houdt tot de pagina nodig is? Dat kan, door een toppaneel te maken dat, wanneer erop wordt geklikt, zijn zelf en zijn inhoud zal onthullen. Maar we moeten dit er leuk uit laten zien, dus we zullen het ook animeren.




In deze zelfstudie maken we een schuifpaneel dat naar binnen schuift om meer te onthullen
inhoud, met JQuery om de hoogte van het paneel te animeren. In dit geval zullen we dat doen
maak een hypothetische login voor het nieuwe tutsplus-gebied dat binnenkort beschikbaar is.

Stap 1 - Photoshop-indeling

Eerst moeten we onze lay-out plannen en het er cool laten uitzien met Photoshop. Bedankt
Collis en zijn geweldige Photoshop-vaardigheden, we hebben een gelikte lay-out om mee te werken.
Je kunt het voor en na PSD-bestand pakken voor verdere inspectie in de bron
Zip bestand. Maar het is vrij vanzelfsprekend. Het heeft ook geen gradiënten, dus
we zouden dit redelijk eenvoudig met CSS kunnen maken.

>

Hier kunt u zien hoe de demo er in zijn normale staat uitziet.

>

Hier is hoe de demo eruit zal zien als het paneel naar beneden wordt geschoven.

Stap 2 - De structuur plannen

Ten eerste moeten we de structuur van de pagina bouwen. Om de lay-out hierboven te maken,
wat hebben we allemaal structureel nodig in de HTML?

  • Ten eerste hebben we een header nodig die zich over de volledige breedte van de pagina uitstrekt.
  • We hebben ook een bovenpaneel nodig, dat voorlopig wordt beweerd dat het permanent wordt uitgebreid
    totdat we de JQuery invoegen.
  • We hebben een gebied nodig voor de normale pagina-inhoud.
  • Eindelijk hebben we een visuele breuk nodig tussen de koptekst en pagina-inhoud, die
    we zullen bereiken door een horizontale liniaal (hr).

    • Oke, dus de lay-out van de pagina is vrij eenvoudig. Hier is het:

      
      
      
      
     Deze div zal dienen als de achtergrond van het panel
    Alle inhoud gaat hier naartoe

    Wauw ... zonder lessen of inhoud binnen, het ziet eruit als een hoop zinloze divs,
    maar later zal alles nodig zijn voor de CSS en JQuery. Nu gaan we beginnen met toevoegen
    lessen ter voorbereiding op de CSS.

    Stap 3 - CSS-voorbereiding: klassen en ID's

    Nu moeten we het skelet veranderen in een echte site met CSS. Goed
    begin met het toevoegen van klassen en ID's aan al die divs! Je kunt dit eenvoudig doen
    door de Photoshop-lay-out af te drukken en de gebieden en bijbehorende markeringen te markeren
    lessen met een sharpie. Voor deze demonstratie zal ik hetzelfde doen alleen in Photoshop.
    Hoewel het erg lelijk kan zijn, zal het hopelijk de verschillende regio's laten zien
    van de pagina.

    >

    Opmerking: ik ben van plan om de normale niet-gemarkeerde afbeelding onder zweven te houden.

    Hier is de pagina met de toegevoegde klassen en ID's:

     
     
     
     
     
     
     
     
     
    Hier inloggen
     
    Verbergen

    Op dit moment zou ik je een screenshot laten zien van wat we tot nu toe hebben gedaan, maar dat doen we niet
    hebben alles behalve een horizontale liniaal en twee onstabiele links. Je snapt het idee.
    Nu kunnen we de pagina stylen.

    Stap 4 - De bestanden aan elkaar koppelen

    Voordat we echter verder gaan, moeten we het CSS-bestand aan het skelet voorstellen.
    Ik heb een stylesheet gemaakt met de titel "style.css". Terwijl we code toevoegen
    naar het hoofd, kunnen we net zo goed de javascript en jQuery toevoegen. Hier is de
    hoofd van de pagina:

     Nettuts JQuery schuifpaneel
    Code
    ×