Så här skapar du en meny för resizing meny

Senast några webbplatser, som Detta är brigaden och Allt du , har börjat presentera en dynamisk och animerad meny som ändras på rull ner. Minimera huvudnavigering för att tillåta mer utrymme för innehållet. I denna handledning förklarar jag hur du kan skapa den här menyn själv med HTML5, CSS3 och bara lite jQuery.

Denna typ av meny är bra om du vill fokusera speciellt på ditt innehåll över hela webbplatsen, och det gör det också möjligt för dig att skapa en större och mer effektfull navigering vid användarens första besök på en webbplats. Du kan bättre visa ditt hemsida varumärke eller logotyp, bra för ovanstående foldvy; och efter att ha engagerat användaren i ett besök döljer en mindre och minimerad version subtilt för att låta användaren fokusera på ditt innehåll.

Det finns flera sätt att göra detta. I den här handledningen ska jag förklara hur man skapar en menyrad med full bredd, som ändras i höjd längs med logotypen, skapar en enkel minimerad version av den första. Om du föredrar kan du också ersätta logotypen med en annan variant av din logotyp, till exempel initialer eller en ikon, men kom ihåg att konsistensen är väldigt viktig här, så att användaren förstår hur elementet har förändrats och att dess huvudsyfte är fortfarande den ursprungliga; navigera på webbplatsen.

Innan vi börjar kan du kassa demoen eller ladda ner källan härifrån .

Skapa den grundläggande strukturen i HTML

Vi börjar med att skapa den grundläggande HTML-koden vi behöver. Vi kommer att hålla fast vid en riktigt enkel HTML5-struktur för utgångspunkten.

 How to create a dynamic top bar | Webdesigner Depot

Nu när vår ursprungliga HTML-kod är klar lägger vi till koden för menyn och några andra detaljer på huvudet av vår HTML-fil.

  How to create a resizing menu bar | Webdesigner Depot#">  inlägg
Fantastiska Freebies
  Låt oss få den menyn liten! 
  Slutet på linjen.

In our : Vi lade till metataggen för författaren att identifiera filskaparen; Därefter inkluderade vi Eric Meyers berömda reset.css som återställer nästan varje element i din HTML-fil, vilket ger dig ett renare och enklare dokument att fungera på. Och eftersom vi ska använda jQuery senare, importerar vi den sista raden av vårt huvudelement via jQuery CDN.

Jag har länkat de flesta filer för att hålla dokumentet så enkelt som möjligt, men kom ihåg att om du föredrar kan du hämta de senaste versionerna av alla dessa filer och använda dem lokalt längs din HTML-fil och detta kommer att förhindra eventuella problem med versionskompatibiliteter eller ändringar i dessa filer i framtiden.

I vår tagg, vi använde standard HTML5

element. Vår

kommer att vara full bredd och ansvara för ändringarna mellan stora och små versioner av menyn. Vi ger vår

en klass som heter "stor" så att vi kan ändra vissa specifika egenskaper i CSS för att göra vår meny till den mindre versionen. De

är vår menybehållare som rymmer vår webbplatslogotypbild och en enkel oorderad listmeny med tre länkar till vår hemsida.

Eftersom vi inte har något innehåll här, så

kommer att användas för att sträcka sidan för att tvinga rullningen, så att vi kan se menyändringen.

Och det här handlar om det på HTML. Från och med nu behöver vi bara stila våra element med CSS och göra menyn dynamisk.

Styling menyn och sidan

För att behålla den här koden i en enda fil skapar jag CSS i element. Så hela vår CSS kommer före vår stängning märka.

Här avslutar vi vår grundläggande header styling. De

kommer att fungera som vår menybehållare. Det kommer att innehålla vår

element och kommer att vara det element där vi definierar bakgrundsfärgen, menyhöjden, menylänkar och andra. Den anpassar sig till skärmens bredd med egenskapsbredden: 100% och kommer att vara fast över de övriga elementen på webbplatsen. Det är viktigt att komma ihåg att ställa in z-indexet för att se till att det här elementet överlappar resten av sidan, såväl som positionen: fixad för att göra diven fixerad ovanpå så att den blir kvar i samma position medan användaren rullar igenom webbplatsen. Som du kan se, förutom att du ställer in stilar för rubrik, ställer vi också vissa specifika stilar för klassen "stor" med header.large. Vår menys ursprungliga tillstånd kommer att vara stor, och så definierar vi här bara de stilar som behövs för att få det att se ut som vi vill så snart användaren går in på sidan.

Dynamiskt ändra storlek på menyn

Vi har vår meny gjort och stylad, men vi vill ändå göra det minimerat. För att skapa denna andra stat skapar vi en ny klass för

I CSS-namnet "Small" kommer det att vara ansvaret för att ändra egenskaper som vi behöver ändra. Vi har redan definierat den större menyn, så nu behöver vi bara göra vår meny kortare, vår bild mindre i storlek proportionellt och den marginal som vi använder i vår

element måste också minskas så att de kommer att förbli vertikalt centrerade med den nya menyhöjden:

/* 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 är dessa stilar nästan identiska med dem till den större menyn, vi ändrade precis klassen "stor" till "liten" och ändrade de värden vi använde för mindre. Vi använder en negativ marginal på bilden för att centrera den i behållaren, eftersom bilden har en subtil skugga och är högre än typografi för att rymma den. Nu har vi alla nödvändiga stilar för att göra menyändringsstorleken, och om du försöker ändra i din HTML

till

, ser du i webbläsaren att menyn blir mindre. Men vi behöver detta gjort dynamiskt.

Ändrar vår menyklass med jQuery

Med alla våra stilar på plats behöver vi bara lägga till lite JavaScript för att göra omkopplingen mellan klasserna "stor" och "liten". Eftersom vi vill ändra detta baserat på användarens rullning använder vi funktionen .scrollTop () i jQuery. Den här funktionen låter oss få eller ställa in rullningens position i pixlar. Bläddrapositionen är antalet pixlar som redan har blivit rullade ur webbläsaren. I det här fallet behöver vi bara veta hur manu pixlar användaren har bläddrat så att vi kan utlösa vår kod och byta klasserna:

Detta är JavaScript som behövs för att upptäcka när användaren har bläddrat. När användaren har rullat mer än 100 pixlar tar den bort klassen "stor" som vi skapade och lägger till vår nya klass, "liten". På detta sätt ändras menyn till de mått som vi tidigare definierade i CSS. Prova det, nu borde det fungera redan, men du kanske tycker att det är för hårt att byta från ett tillstånd till det andra.

`CSS övergångar för att animera menyn`

För att göra växeln mellan klasserna på vår meny mjukare, ska vi använda CSS-övergångar. Använd bara den här koden bredvid resten av din 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 */}

Här definierar vi övergångar för alla CSS-egenskaper för

  ,   och   element, i stort sett alla de element som vi ändrar.  Denna kod kommer att animera ändringarna mellan båda klasserna med CSS-övergångar i 1 sekund.  Testa det nu, resultatet ska vara mycket jämnare. 
  Det är din tur nu 
  Nu när du har sett hur lätt denna effekt kan uppnås, fortsätt och gör din egen version av en resizing menyrad.  Du kan också bli mer kreativ än mig och ändra ännu fler egenskaper som bakgrundsfärg, textfärg och jämn storlek och position på menyn, och testa det med olika typer av CSS-övergångar, men kom ihåg att dina användare borde fortsätta med ändringarna i menyn.  Menyn och webbplatslogotypen är vanligtvis ett av de mest identifierbara och förväntade elementen, och genom att ändra det drastiskt kan du förvirra användaren, så se till att du håller viss koherens mellan båda versionerna och testa det alltid med vissa användare. 
  Har du byggt en meny så här?  Föredrar du en annan teknik?  Låt oss veta i kommentarerna. 
  Utvalda bild / miniatyrbild,   dragspel bild  via Shutterstock. 


        
                        all din meny 
                        resizable menyn 
                        Ändra storlek på rullning 
                        det här är brigadmenyn



    
        
            
            ← Beyond Blogging: WordPress som en plattform            
            Vad är nytt för designers, mars 2013 →


                
                                        
    
         Senaste 
         Det bästa 
    

    
    
        
            
                          
                
                    
                        25+ måste ha Chrome-förlängningar för webbdesigners och utvecklare
                    
                
            
                          
                
                    
                        Den Ultimate Responsive Web Design Roundup
                    
                
            
                          
                
                    
                        App Design Versus Web Design: Vilka designers kan lära sig varandra
                    
                
            
                          
                
                    
                        EDGE: En ny HTML5-erbjudande från Adobe
                    
                
            
                    
        
            
                              
                    
                        
                            Hur man skriver enkelt, elegant CSS med Compass & Sass
                        
                    
                
                              
                    
                        
                            Nybörjarens guide till Sass
                        
                    
                
                              
                    
                        
                            En historia av Apple-musen i CSS
                        
                    
                
                              
                    
                        
                            Inte din standard CSS: Skärpa gränserna med Adobe

Så här skapar du en resizing menyrad

Skapa den grundläggande strukturen i HTML