Idag ska vi skapa en fungerande horisontell CSS-meny från början. Vi använder transparenta PNG-filer (ursäkta föråldrade webbläsare) för att skapa en blank horisontell stapel, vars färg lätt kan ändras med endast CSS. Innan vi börjar, kolla vad vi ska bygga i live demo.
Skapa PSD
Photoshop-arbetet för menyn är ganska minimal och bör bara ta dig några minuter. Jag har brutit upp det i fem super enkla steg.
Solid Bar
Skapa en ny RGB-fil i Photoshop och dra en 45-pixel högfärgad bar (jag använde # 4d4e50) hela vägen över din duk.
Lutning
Därefter ta ditt gradientverktyg och se till att det är inställt på en gradient som börjar på svart och slutar på transparent. Börja längst ner, sträck gradienten vertikalt över din gråstång.
Glans
Gör en vit rand som stämmer överens med toppen av din gråstång men sträcker bara halva vertikalavståndet. Ställ opaciteten för denna rand till 7%.
Stripes
Gör ytterligare två vita ränder, den här gången bara några pixlar höga och sätt dem lite in från den övre och nedre delen av den grå fältet.
Sparande
Tro det eller inte, det handlar om allt vi behöver! Innan du sparar PNG stänger du av det ursprungliga färgfältet. Det här är så att vi kan ändra färgen inom vår CSS. Observera också att vi inte behöver hela bilden eftersom vi ställer in den för att upprepa horisontellt. Skär bara av en liten vertikal skiva och gå till? Spara för webb och enheter? för att spara din PNG.
HTML
Jag antar en grundläggande förståelse av HTML och CSS här. Jag ska försöka vara så beskrivande som möjligt utan att förklara allt för rad.
Den tomma HTML
Vi börjar med en enkel, tom HTML-sida.
Behållare
Nu lägger vi till en container div som håller navigeringsmenyn div.
Menystruktur
För att avsluta vår HTML, slänga in en oordnad lista med spänningsobjekt för Hem, Om, Tjänster, Arbete och Kontakt. Detta kommer att ligga till grund för våra menyalternativ. Vi lägger in bakgrunden och stilar denna lista alla i CSS.
CSS
CSS kommer att innehålla huvuddelen av arbetet. Allt vi har gjort hittills är att skapa en lista med länkar så att din sida ska se ut så här:
Bakgrundsfärg
Det första vi gör är att tona bakgrunden lite för att bryta upp den tråkiga vita bakgrunden. Lägg bara till följande kod i kroppen.
Basic Container Styling
För att komma igång med att ställa in behållaren, sätt positionen till relativ och höjden 45 pixlar (vilken är höjden på vår Photoshop-grafik). Sätt sedan färg och bakgrund på vitt och bredden till 100% så det sträcker sig hela vägen över fönstret.
Denna kod ska resultera i en röra i förhandsvisningen. Oroa dig inte, det är precis hur det borde se här!
Lägga till och anpassa bilden
Nu kommer vi in i de saker som får det att se ut som en meny! Den här gången riktar vi oss till navMenu-diven som innehåller länkarna. Återigen, ställ din position till relativ och höjd till 45px. Vi lägger inte till någon text i detta skede, men fortsätt och ställa in teckensnittstorleken till 17px. Därefter ställde jag bakgrundsfärgen och bilden med en enda kodrad. Observera att färgen (# 4d4e50) är färgen på vår ursprungliga färgfält i Photoshop. Denna inställning är nyckeln till flexibiliteten i den här menyn. Om du ändrar det här värdet ändras färgen på navigeringsmenyn, vilket gör det super enkelt att anpassa. Efter att ha satt in en färg, släng in bakgrundsbilden och ställ in den för att repetera på x-axeln.
Nu om du förhandsgranskar sidan ska du se en smidig meny meny! Experimentera med att ändra det här färgvärdet för att se hur bilden behåller sin glans när du ändrar färger.
Adressera länkarna
Nästa lägger vi till en stor bit av CSS till den oordnade listan för att börja få våra länkar till plats. För den allmänna oorderade listan, ställ in marginalen och vadderingen till 0, liststilen till ingen, bredden till auto och float till vänster. Stil sedan listobjekten i den oordnade listan (li). Återigen flyter vi till vänster men noterar den här gången vi ställer in displayen för att blockera? och våra marginaler till 0 1px.
Ta en titt på din sida i Safari. Listobjekten ska ligga uppåt horisontellt nu.
Styling Texten
Rikta nu på länkobjekten (a) i menyn. Ställ in skärmen för att blockera, flyta till vänster, höjden till 45px och färgen till vit. För att eliminera länken understruken ställer du in textdekoration till ingen. Slutligen, för att rymma ut länkarna, ställer du en gång till 0 0 0 30px (medurs: topp 0, höger 0, botten 0, vänster 30).
Texten ska titta närmare på var vi vill ha det nu, men det är fortfarande lite av.
Den här tiden riktar sig till den oordnade listan, listobjektet, länkpanelämnen (inriktning blir lite galen). Lägg märke till att jag har lagt till fler vadderingar för att ordna saker och ting bättre och ställa in en höjd och flyta. Därefter ser vi lite kod som jag lånade från Chris Coyier på CSS-Tricks som ger oss en riktigt fin typsnitt för menyn. HelveticaNeue-Light är i huvudsak vårt val här, så de tittare som har det installerat ser det.De som inte kommer helt enkelt återgår till nästa typsnitt inline tills deras webbläsare hittar ett installerat alternativ. Med Chriss ord? Kan du också använda den trevligaste Helvetica du kan? ?
Nu är vår menytext vackert utformad och på plats!
Lägga till Hover Effects
Vårt sista steg är att lägga till några snygga svepseffekter så att du enkelt kan se vilket alternativ du ska välja. Vi kommer att rikta in länkarna på svävar med vårt första utdrag och spännerna på svävar på vår andra. Meddelande under? Bakgrund? Jag satte in samma bakgrundsbild som vi använder för menyraden själv. Det här är så att vårt hover-alternativ behåller det snygga glansiga utseendet. Men den här gången ställer jag bakgrundsfärgen till en mörkare grå. Detta ger differentieringen i vår svängningseffekt.
Voila! Nu har vi en vackert glänsande CSS-meny med en fin rollover-effekt.
Byter färg
Den dåliga nyheten är att webbläsare utan PNG-support inte alls kommer att visa det här. Den goda nyheten är att för webbläsare som stöder PNGs (du vet, webbläsare från 21: a århundradet) gör den här det galet enkelt att helt ändra menyns utseende med endast två CSS-färgvärde-tweaks!
Hitta bara de två platserna i din CSS där bakgrundsbilden visas (en gång för stapeln och en gång för övergången) och ändra de föregående färgerna. Titta vad som händer om vi skapar en annan meny och ersätt # 3d359a för huvudfärgen och # 5749e7 för svävarfärgen.
Slutsats
Jag hoppas att du har lärt dig en eller två saker om CSS och har blivit inspirerade att experimentera med öppenhet för flexibilitetens skull. Du kan enkelt skapa samma effekt med hjälp av JPG, men det skulle ta fler bilder och skulle kräva att du skapar nya bilder i Photoshop varje gång du ville ändra färgen.