Slik lager du en resizing menylinje

I det siste har noen nettsteder, som Dette er brigaden og Alle dere , har startet med en dynamisk og animert meny som endres på rull ned. Minimer hovednavigasjonen for å gi mer plass til innholdet. I denne veiledningen vil jeg forklare hvordan du kan lage denne menyen selv med HTML5, CSS3 og bare litt av jQuery.

Denne typen meny er flott hvis du vil fokusere spesielt på innholdet ditt gjennom hele nettstedet, og det gir deg også mulighet til å skape en større og mer effektiv navigasjon på en brukeres første besøk på et nettsted. Du kan bedre vise nettstedets merkevare eller logo, flott for det ovennevnte foldevisningen; og etter å ha engasjert brukeren i et besøk, skjuler en mindre og minimalisert versjon subtilt for å la brukeren fokusere hovedsakelig på innholdet ditt.

Det er flere måter å gjøre dette på. I denne opplæringen vil jeg forklare hvordan du oppretter en full bredde fast menylinje, som justeres i høyde sammen med logoen, og skaper en enkel minimalisert versjon av den første. Hvis du foretrekker det, kan du også erstatte logobildet med en annen variant av logoen din, for eksempel initialer eller et ikon, men husk at konsistensen er veldig viktig her, slik at brukeren forstår hvordan elementet har endret seg og at hovedformålet er er fortsatt den opprinnelige navigerer på nettsiden.

Før vi starter, kan du sjekk demoen eller last ned kilden herfra .

Opprette grunnleggende struktur i HTML

Vi starter med å lage den grunnleggende HTML-koden vi trenger. Vi legger til en veldig enkel HTML5-struktur for utgangspunktet.

 How to create a dynamic top bar | Webdesigner Depot

Nå som vår første HTML-kode er ferdig, legger vi til koden for menyen, samt noen andre detaljer på hodet til vår HTML-fil.

  How to create a resizing menu bar | Webdesigner Depot#">  innlegg
Awesome Freebies
  La oss få den menyen liten! 
  Slutten.

In our : Vi la metataggen til forfatteren for å identifisere filoppretteren; etter det inkluderte vi Eric Meyers berømte reset.css som vil nullstille nesten alle elementer i HTML-filen din, noe som gir deg et renere og enklere dokument å jobbe med. Og siden vi bruker jQuery senere, importerer vi den siste linjen i hovedelementet gjennom jQuery CDN.

Jeg koblet sammen de fleste filer for å holde dokumentet så enkelt som mulig, men husk at hvis du foretrekker det, kan du laste ned de nyeste versjonene av alle disse filene og bruke dem lokalt langs HTML-filen din, og dette forhindrer mulige problemer med versjonskompatibilitet eller endringer i disse filene i fremtiden.

I vår tag, brukte vi standard HTML5

element. Vår

vil være full bredde og vil være ansvarlig for endringene mellom store og små versjoner av menyen. Vi gir vår

en klasse som heter "stor" slik at vi kan endre noen spesifikke egenskaper i CSS for å slå menyen inn i mindre versjon. De

er vår menycontainer som inneholder vårt nettstedlogobilde og en enkel uordnet listemeny med tre lenker til vår nettside.

Siden vi ikke har noe innhold her,

skal brukes til å strekke siden for å tvinge rullen, slik at vi kan se menyendringen.

Og dette handler om det på HTML. Fra nå av trenger vi bare å style våre elementer med CSS og gjøre menyen dynamisk.

Styling menyen og siden

For å beholde denne koden i en enkelt fil, lager jeg CSS i element. Så hele vår CSS kommer før vår avslutning stikkord.

Her er vi ferdig med vår grunnleggende header styling. De

vil tjene som menybeholder. Det vil inneholde vår

element og vil være elementet der vi definerer bakgrunnsfargen, menyhøyden, menykoblingsstiler og andre. Det vil tilpasse seg bredden på skjermen med egenskapen bredde: 100% og vil forbli fast over de andre elementene på nettsiden. Det er viktig å huske å sette z-indeksen for å sikre at dette elementet overlapper resten av siden, så vel som posisjon: fast for å gjøre diven fast på toppen, slik at den forblir i samme posisjon mens brukeren ruller gjennom nettstedet. Som du kan se, foruten å sette stilene for topptekst, innstiller vi også bestemte stiler for den "store" klassen ved hjelp av header.large. Vår menys startstat vil være stor, og så definerer vi her bare de stilene som trengs for å gjøre det ser ut som vi vil så snart brukeren kommer inn på siden.

Dynamisk endre størrelse på menyen

Vi har vår meny gjort og stylet, men vi vil fortsatt gjøre det minimert. For å opprette denne andre staten skal vi skape en ny klasse for

I CSS kalt "liten", vil det være ansvarlig for å endre egenskapene vi må endre. Vi har allerede definert den større menyen, så nå trenger vi bare å gjøre menyen kortere, vårt bilde er mindre i størrelse proporsjonalt, og den margin-toppen vi bruker i vår

elementene må også reduseres, slik at de forblir vertikalt sentrert med den nye menyhøyden:

/* Sizes for the smaller menu */header.small{ height: 50px; }header.small img{ width: 287px; height: 69px; margin-top: -10px; }header.small li{ margin-top: 17px; }

Så som du kan se, er disse stilene nesten identiske med dem til den større menyen, vi endret bare klassen "stor" til "liten" og endret verdiene vi brukte til mindre. Vi bruker en negativ marginal på bildet for å sentrere den i beholderen, siden bildet har en subtil skygge og er høyere enn typografien for å imøtekomme den. Nå har vi alle de nødvendige stilene for å gjøre menyendringsstørrelsen, og hvis du prøver å endre i HTML-en din

til

, vil du se i nettleseren at menyen blir mindre. Men vi trenger dette gjort dynamisk.

Endrer menyklassen med jQuery

Med alle våre stiler på plass, trenger vi bare å legge til litt JavaScript for å gjøre bryteren mellom klassene "stor" og "liten". Siden vi vil endre dette basert på rullingen av brukeren, bruker vi funksjonen .scrollTop () i jQuery. Denne funksjonen lar oss få eller sette rulleposisjonen i piksler. Rulleposisjonen er antallet piksler som allerede er rullet ut av nettleservisningen. I dette tilfellet trenger vi bare å vite hvordan manu-piksler brukeren har rullet slik at vi kan utløse vår kode og bytte klassene:

Dette er JavaScript som trengs for å oppdage når brukeren har rullet. Når brukeren har rullet mer enn 100 piksler, vil den fjerne klassen "stor" som vi opprettet og legg til vår nye klasse, "liten". På denne måten endres menyen til de dimensjonene vi tidligere definerte i CSS. Prøv det, nå skal det fungere allerede, men du kan finne det for hardt å bytte fra en stat til en annen.

`CSS-overganger for å animere menyen`

For å gjøre bryteren mellom klassene på vår meny jevnere, skal vi bruke CSS-overganger. Bare bruk dette koden ved siden av resten av CSS.

header,nav, a, img, li{transition: all 1s;-moz-transition: all 1s; /* Firefox 4 */-webkit-transition: all 1s; /* Safari and Chrome */-o-transition: all 1s; /* Opera */}

Her definerer vi overganger for alle CSS egenskaper for

  ,   og   elementer, i utgangspunktet alle elementene vi endrer.  Denne koden vil animere endringene mellom begge klassene med CSS-overganger i 1 sekund.  Test det nå, resultatet skal være mye jevnere. 
  Det er din tur nå 
  Nå som du har sett hvor enkelt denne effekten kan oppnås, fortsett og lag din egen versjon av en resizing menylinje.  Du kan også bli mer kreativ enn meg og endre enda flere egenskaper som bakgrunnsfarge, tekstfarge og jevn størrelse og posisjon på menyen, og til og med teste den med forskjellige typer CSS-overganger, men husk at brukerne dine bør holde opp med endringene i menyen.  Menyen og nettstedlogoen er vanligvis en av de mest identifiserbare og forventede elementene, og ved å endre det drastisk, kan du forvirre brukeren, så sørg for å holde noen sammenheng mellom begge versjoner og test det med noen brukere. 
  Har du bygget en meny som dette?  Foretrekker du en annen teknikk?  Gi oss beskjed i kommentarene. 
  Utvalgt bilde / miniatyrbilde,   trekkspill bilde  via Shutterstock. 


        
                        alt du menyen 
                        resizable meny 
                        endre størrelsen på bla 
                        dette er brigademenyen



    
        
            
            ← Utover blogging: WordPress som en plattform            
            Hva er nytt for designere, mars 2013 →


                
                                        
    
         Siste 
         Det beste 
    

    
    
        
            
                          
                
                    
                        Slik sikrer du at MailChimp-e-postene faktisk når dine brukere
                    
                
            
                          
                
                    
                        CSS Går 3D med Voxel.Css
                    
                
            
                          
                
                    
                        Dynamiske nettsteder ved statisk hastighet: kunsten til nettstedet caching
                    
                
            
                          
                
                    
                        Statslig suksess: Jekyll mot resten av verden
                    
                
            
                    
        
            
                              
                    
                        
                            4 banebrytende teknologier for å øke hastighetene på nettstedene dine
                        
                    
                
                              
                    
                        
                            9 grunner håndkoding alltid slår stedbyggere
                        
                    
                
                              
                    
                        
                            Zurb lanserer ny @mention-motor, Tribute.js
                        
                    
                
                              
                    
                        
                            Slik sikrer du at MailChimp-e-postadresser faktisk kommer til brukerne

Slik oppretter du en størrelsesramme for menylinjen

Opprette grunnleggende struktur i HTML