Idag har vi ännu ett fantastiskt steg-för-steg-CSS-projekt för dig! Den här gången kommer vi att bygga en super användbar utökande vertikal navigationsmeny. Det är ett bra sätt att dölja många länkar i ett ganska litet utrymme och animationerna kommer att ge en fin touch till din webbplats.
Även om du är en komplett nybörjare bör du kunna dra av det här. Jag guidar dig längs varje steg på vägen och förklarar hur varje bit av kod fungerar så att du kan implementera samma teknik i framtida projekt och fördjupa din förståelse av CSS. Låt oss börja!
Konceptet
Innan vi börjar kodning är det alltid till hjälp att definiera det grova konceptet om vad du vill uppnå, så att du kan linda din hjärna kring vad som ska bli involverat. Objektet vi bygger idag är en vertikal navigationsmeny som ligger i ett slags modifierat dragspelformat (få en snygg titt på den färdiga produkten här).
Som du kan se, stängs sektionerna på botten som standard och öppnas när du över över dem. Men för att lägga till en fin variation kommer vi också att inkludera en sektion som stannar öppen hela tiden. I huvudavsnittet som alltid är öppet kommer vi att inkludera ett kort välkomstmeddelande och i de sektioner som öppnas blir underavsnitt av navigeringslänkar.
Nu när vi har en bra bild av var vi ska ska vi börja beskriva strukturen i vår HTML.
HTML
Det första vi ska göra är att kasta i lite bra HTML5 för att sätta in menyn. Det nya navelementet ger en vacker semantisk behållare till vår meny.
Låt oss nu tänka på hur vår meny ska struktureras. Vi kommer inte bara att få en lista med länkar, varje stapel representerar en länk med ett extra område under det. Vi lägger upp dessa i en div. Sedan inom varje div behöver vi en huvudlänk (den färgade stapeln) och en lista över dellänkar (det vita området). Om vi antar att det här objektet kommer att kastas på en webbplats som redan har standard styling, låt oss med fördel avgöra på h4 för huvudlänken och en enkel oorderad lista för resten.
Vi kan kopiera, klistra in och modifiera den här delen av koden för att göra de olika delarna av vår navigationsmeny. Här har vi en portfölj, Om och Kontakt-sektion, var och en med tre underlänkar. Varje avsnitt ges samma klass (menypunkt) så att vi kan stile dem på en gång.
Jag ville fokusera på dessa områden först eftersom de är alla samma, men kom ihåg att toppsektionen är faktiskt annorlunda, både i funktionalitet och innehåll. I stället för att hålla en oorderad lista, kommer den att hålla en paragraf. Vi lägger också till i en unik klass för att göra det mycket lättare att rikta in i vår CSS.
Med det är vi redan färdiga med HTML. Även om det inte är stylat alls, visar live-förhandsvisningen perfekt hierarkin i vår navigationsmeny. Här kan du tydligt se vår meny börjar ta form.
Basstilar
För att starta vår meny styling, måste vi fastställa några grunder. Först tar vi bort standardmarginalerna och vadderingen. Vi kommer att krossa delarna rätt upp bredvid varandra så att standardwebbläsaravstånd förstör layouten.
Därefter kommer vi att applicera en enkel färg på bakgrunden så de vita delarna av vår meny kommer att sticka ut. Då kastar vi i några grundläggande teckensnitt och lägger till en liten skugga i menyn. Observera att marginalen som ställs in i nav-blocket centrerar menyn på sidan, det här är endast för visning och bör tas bort när du vill ställa in menyn på plats.
Slutligen lägger vi till några dimensioner och bakgrundsfärg till nav och menyobjektväljare. Här är den resulterande koden:
En här punkt, förhandsvisningen ser ut som om vi har gjort mer skada än bra, men frukta inte, det börjar se spiffy på nolltid.
Header Styles
Nu är det dags att stila våra h4-taggar och vända dem till de horisontella staplarna som vi såg i vår mockup. För att göra detta behöver vi bara en liten polstring och en bakgrundsfärg. Medan vi är här kan vi börja stila typografi också. Vi ärva ar fontfamiljen vi satt upp för, så vi behöver inte skriva om det. Istället behöver vi bara ställa in en storlek och vikt.
Som du kan se i bilden nedan, övertygar våra länkstilar fortfarande några av de typstilar vi ställer in så vi måste gå in och fixa dem nästa.
Header Länkar
Självklart är den blå länken inte bra så vi behöver byta det till vitt. Vi vill också gräva någon textdekoration (understruken). Nu kan vi sluta här men standardbeteendet skulle vara att endast texten är klickbar och inte hela stapeln, vilket inte är idealiskt. För att göra hela linjen en länk, ställer vi in visningsegenskapen och blockerar bredden till hela menyns storlek (200px).
Nu ser vår färgade bar mycket bättre ut. Här är förhandsvisningen:
Gör det vackert
Om du vill hålla fast vid något enkelt, kan du hoppa över det här steget, men jag kommer att lägga mig på och lägga till några fler visuella tweaks. Gå tillbaka och ändra det blockhuvudstilen för att inkludera en gradient och några mycket subtila gränser. Du kommer sannolikt inte ens att kunna upptäcka gränserna tills menyn är stängd, men i kombination med gradienterna hjälper de verkligen att skilja varje avsnitt så att de inte alla ser ut som ett stort block.
Hover Styles
Därefter kommer vi lägga till en subtil svängstil till barlinjen. Allt vi ska göra är att finjustera färgerna på lutningen lite så att de blir ljusare när du svävar.
Styckeformat
Kom ihåg att det första objektet i vår meny innehåller en paragraf och inte en oordnad lista, så nästa vi angriper det här för att få det snyggt. Listorna tar en stor bit av kod men stycket kräver knappast någonting. Definiera bara storleken och färgen, och kasta sedan i någon vaddering.
Övre delen ser nu bra ut! Både rubrikfältet och stycket är precis där vi behöver dem att vara.
Oorderade listformat
Det finns massor av saker som vi behöver göra för att få dessa listor rakt ut. Låt oss byta saker lite och titta på koden först, så går jag igenom dig.
Som du kan se, riktar det första blocket den oordnade listan som en hel enhet. Här ställer jag in några grundläggande storlek och typsnittstyp och tar bort punktpunkten genom att ställa in listestypstyp till ingen.
Nästa riktar jag in länkarna specifikt. Jag flyttade över dem, tog bort undertryckningarna, ställde in färgen och utförde samma skärm: blockblock som vi såg tidigare för att göra det klickbara området större.
För att avsluta sakerna tillämpade jag några anpassade stilar till listobjekten själva. Den nedersta gränsen skapar en separation mellan varje objekt och svängstilen ändrar bakgrunden. Här är resultatet av vårt arbete, vår meny är nästan färdig!
Dölj och animera
Fram till den här tiden har vi hållit vår meny öppnad så att vi kunde se den medan vi utformar elementen inom. Nu när vi vet att alla våra visuella stilar är exakt som vi vill ha dem, är det dags att kollapsa varje avsnitt och sedan ställa dem upp för att öppna sig på svävaren.
Som standard ställer webbläsare höjden på de oordnade listorna till auto, vilket betyder att de bara är tillräckligt långa för att hålla allt innehåll inom. För att kollapsa menysektionerna så att bara stavarna visar kan vi rikta in sig på de oordnade listorna och ställa in höjden till 0. Observera att vi lämnar stycket ensamma, så att det här är så att vår toppsektion alltid är öppen.
Nu är vår meny mycket kortare och äter inte så mycket utrymme. Du kan också äntligen se nytta av de gradienter och gränser som vi implementerade tidigare.
Animera övergången
Därefter vill vi öppna dessa menyer bakåt på svävaren, men innan vi gör det, låt oss skapa en animering så övergången är snäll och gradvis. Se till att du sätter in de olika webbläsarutvidgningarna och rikta in höjdegenskapen.
Expanderar på Hover
Allt som är kvar att göra nu är att det gör att när du svävar utökar ul. Detta är knepigt men var så försiktig. Din instinkt kan vara att göra något sånt? Ul: sväva? men det är inte vad vi vill ha. I stället vill vi göra det så att du kan sväva var som helst i det menyobjektet, antingen i fältet eller i den oordnade listan. Emellertid är det objekt som vi vill expandera fortfarande bara ul. Så här ser vår väljare ut:
Ibland är det lätt att läsa en väljare bakåt när du försöker lista ut vad det gör. Detta berättar att vår webbläsare ställer in en höjd på 93px till våra oordnade listor när en meny-artikel svävar över.
En viktig sak att notera här är att vi inte bara kan ställa in höjden automatiskt eftersom det av någon anledning här inaktiverar animeringen. Om du inte vill ha animeringen är en höjd av auto mycket flexibel och kan du ändra antalet undermenyobjekt. Om du vill göra detta med animeringen måste du rikta in höjden för varje enskild person.
Se den i aktion
Vår meny är nu klar. Var noga med att sparka däcken i demo för att se hur allting fungerar. Jag ska också kasta in en länk till den färdiga koden så att du kan titta på allt ihop.
demo: Starta Demo
Se koden: Kolla in HTML och CSS på Tinkerbin
Slutsats
Jag hoppas att du njöt av detta genomgång av att bygga en animerad vertikal navigationsmeny. Under genomförandet är det väldigt lik de animerade nedladdningsknapparna som vi byggt den andra dagen, så du borde verkligen hänga med att dölja och visa innehåll med ren CSS.
Se upp för en ännu bättre version av den här menyn för att dyka upp på vår helt nya systersida, Design Curate. Du hittar massor av bra freebies där du kan ladda ner och implementera i dina projekt idag.