Sådan oprettes en størrelsesindstillingsmenu

Senest nogle hjemmesider, som Dette er brigaden og Alle dig , er begyndt at byde på en dynamisk og animeret menu, der ændres på scroll ned. Minimer hovednavigationen for at give mere plads til indholdet. I denne vejledning forklarer jeg, hvordan du selv kan oprette denne menu med HTML5, CSS3 og bare en smule jQuery.

Denne slags menu er fantastisk, hvis du vil fokusere specielt på indholdet på hele webstedet, og det giver dig også mulighed for at skabe en større og mere effektiv navigation på en brugers første besøg på en hjemmeside. Du kan bedre vise dit website brand eller logo, fantastisk til ovenstående fold visning; og efter at have engageret brugeren i et besøg skjuler en mindre og minimeret version subtilt for at lade brugeren fokusere primært på dit indhold.

Der er flere måder at gøre dette på. I denne vejledning forklarer jeg, hvordan man opretter en fast bredde i fast menulinje, der ændrer sig i højden sammen med logoet, hvilket skaber en simpel minimeret version af den første. Hvis du foretrækker det, kan du også erstatte logoet med en anden variant af dit logo, f.eks. Initialer eller et ikon, men husk at konsistens er virkelig vigtig her, så brugeren forstår, hvordan elementet er ændret, og at hovedformålet er er stadig den oprindelige; navigere på hjemmesiden.

Før vi starter, kan du checkout demoen eller download kilden herfra .

Oprettelse af den grundlæggende struktur i HTML

Vi starter med at oprette den grundlæggende HTML-kode, vi skal bruge. Vi vil holde os til en rigtig simpel HTML5 struktur for udgangspunktet.

 How to create a dynamic top bar | Webdesigner Depot

Nu da vores første HTML-kode er færdig, tilføjer vi koden til menuen samt nogle andre detaljer på hovedet af vores HTML-fil.

  How to create a resizing menu bar | Webdesigner Depot#">  Indlæg
Awesome Freebies
  Lad os få den menu lille! 
  Slutningen af linjen.

In our : Vi tilføjede metataggen til forfatteren for at identificere filopretteren; Derefter inkluderede vi Eric Meyers berømte reset.css, der vil nulstille næsten ethvert element i din HTML-fil, hvilket giver dig et renere og lettere dokument til at arbejde på. Og da vi senere bruger jQuery, importerer vi den sidste linje i vores hovedelement gennem jQuery CDN.

Jeg hotlinked de fleste filer for at holde dokumentet så enkelt som muligt, men husk at hvis du foretrækker det, kan du downloade de nyeste versioner af alle disse filer og bruge dem lokalt langs din HTML-fil, og dette forhindrer mulige problemer med versionskompatibiliteter eller ændringer i disse filer i fremtiden.

I vores tag, vi brugte standard HTML5

element. Vores

vil være fuld bredde og vil være ansvarlig for ændringerne mellem store og små versioner af menuen. Vi giver vores

en klasse med navnet "stor", så vi kan ændre nogle specifikke egenskaber i CSS'en for at vende vores menu til den mindre version. Det

er vores menu container, der indeholder vores hjemmeside logo billede og en simpel uordnet liste menu med tre links til vores hjemmeside.

Da vi ikke har noget indhold her,

vil blive brugt til at strække siden for at tvinge rullen, så vi kan se menuændringen.

Og det handler om det på HTML. Fra nu af skal vi bare style vores elementer med CSS og gøre menuen dynamisk.

Styling menuen og siden

For at beholde denne kode i en enkelt fil, vil jeg oprette CSS i element. Så vores hele CSS kommer før vores lukning tag.

Her afslutter vi vores grundlæggende header styling. Det

vil fungere som vores menu container. Det vil indeholde vores

element og vil være det element, hvor vi definerer baggrundsfarve, menuhøjde, menulinjeformater og andre. Det vil tilpasse sig skærmens bredde med egenskabens bredde: 100% og forbliver løst over de øvrige elementer på hjemmesiden. Det er vigtigt at huske at indstille z-indekset for at sikre, at dette element overlapper resten af siden såvel som stillingen: fast for at gøre diven fastgjort ovenpå, så den forbliver i samme position, mens brugeren ruller gennem hjemmesiden. Som du kan se, udover at indstille stilarter til header, indstiller vi også nogle specifikke stilarter til den "store" klasse ved hjælp af header.large. Vores menus oprindelige tilstand vil være stor, og så definerer vi her kun de stilarter, der er nødvendige for at få det til at se ud, som vi ønsker, så snart brugeren kommer ind på siden.

Dynamisk ændring af menuen

Vi har vores menu gjort og stylet, men vi vil stadig gøre det minimeret. For at oprette denne anden stat skaber vi en ny klasse for

I CSS-navnet "lille" er det ansvaret for at ændre de egenskaber, vi skal ændre. Vi har allerede defineret den større menu, så nu skal vi bare gøre vores menu kortere, vores billede er mindre i størrelse proportionalt og den margen, vi bruger i vores

elementer skal også reduceres, så de forbliver centreret lodret med den nye menuhøjde:

/* 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; }

Som du kan se, er disse stilarter næsten identiske med dem til den større menu, vi har lige ændret klassen "stor" til "lille" og ændret de værdier, vi brugte til mindre. Vi bruger en negativ margin-top på billedet for at centrere den i beholderen, da billedet har en subtil skygge og er højere end typografien for at imødekomme den. Nu har vi alle de nødvendige stilarter til at gøre menuændringen størrelse, og hvis du forsøger at ændre i din HTML

til

, vil du i browseren se, at menuen bliver mindre. Men vi har brug for dette gjort dynamisk.

Ændring af vores menuklasse med jQuery

Med alle vores stilarter på plads, skal vi bare tilføje en smule JavaScript for at skifte mellem klasserne "stor" og "lille". Da vi vil ændre dette på baggrund af brugerens rullning, bruger vi funktionen .scrollTop () i jQuery. Denne funktion giver os mulighed for at få eller indstille rullens position i pixels. Rullepositionen er antallet af pixels, der allerede er rullet ud af browservisningen. I dette tilfælde behøver vi bare at vide, hvordan manu pixels brugeren har rullet, så vi kan udløse vores kode og skifte klasserne:

Dette er JavaScript, der skal registreres, når brugeren har rullet. Når brugeren har rullet mere end 100 pixels, fjerner den klassen "stor", som vi oprettet og tilføjer vores nye klasse, "lille". På den måde ændres menuen til de dimensioner, vi tidligere definerede i CSS. Prøv det, nu skal det fungere allerede, men du kan finde det for hårdt at skifte fra en stat til den anden.

`CSS overgange til at animere menuen`

For at gøre skiften mellem klasser på vores menu mere jævn, vil vi bruge CSS overgange. Brug kun dette stykke kode ud for resten af dit 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 overgange for alle CSS-egenskaber til

  ,   og   elementer, dybest set alle de elementer, vi ændrer.  Denne kode vil animere ændringerne mellem begge klasser med CSS-overgange i 1 sekund.  Test det nu, resultatet skal være meget glattere. 
  Det er din tur nu 
  Nu hvor du har set, hvor nemt denne effekt kan opnås, skal du gå videre og lave din egen version af en størrelsesindstillingsmenu.  Du kan også blive mere kreativ end mig og ændre endnu flere egenskaber som baggrundsfarve, tekstfarve og lige størrelse og position på menuen og endda teste det med forskellige typer CSS-overgange, men husk at dine brugere skal holde op med ændringerne i menuen.  Menuen og website-logoet er normalt et af de mest identificerbare og forventede elementer, og ved at ændre det drastisk, kan du forvirre brugeren, så sørg for at holde sammenhæng mellem begge versioner og altid teste den ud med nogle brugere. 
  Har du bygget en menu som denne?  Foretrækker du en anden teknik?  Lad os vide i kommentarerne. 
  Fremhævet billede / miniaturebillede,   harmonika billede  via Shutterstock. 


        
                        alt du menu 
                        menuen, der kan ændres 
                        resize på scroll 
                        dette er brigademenuen



    
        
            
            ← Beyond Blogging: WordPress som en platform            
            Hvad er nyt for designere, marts 2013 →


                
                                        
    
         Seneste 
         Det bedste 
    

    
    
        
            
                          
                
                    
                        Introduktion til CSS 'New Font-Display Property
                    
                
            
                          
                
                    
                        4 Cutting Edge Technologies at fremskynde dine websteder
                    
                
            
                          
                
                    
                        9 grunde Håndkodning slår altid stedbyggere
                    
                
            
                          
                
                    
                        Zurb lancerer ny @Mention Engine, Tribute.Js
                    
                
            
                    
        
            
                              
                    
                        
                            Sådan animerer du medieforespørgsler
                        
                    
                
                              
                    
                        
                            Sådan opbygger du et realtime jQuery-plugin
                        
                    
                
                              
                    
                        
                            Brug af Foundation-rammen
                        
                    
                
                              
                    
                        
                            Vind 10 licenser af Jumpeye Framework

Sådan oprettes en størrelsesregulerende menulinje

Oprettelse af den grundlæggende struktur i HTML