05. CSS

Två menyer i css

2010-01-18 05:25 #0 av: johan-ahlback

Att göra menyer i css är lätt när man väl vet hur man ska göra dem. Jag ska visa hur man kan göra två olika menyer. Den första visar hur du kan göra en sida med flikar så det ser ut som att man bara byter flik. Den andra är meny med en bild som bakgrund. Att göra de här menyerna kommer att öka dina kunskaper om hur du gör olika menyer. Och kanske även ge dig en lite djupare bild av vad man kan göra i css.

Intro

Först ska jag prata lite om länkars olika lägen. Länkar har fyra olika lägen och de är:
a:link - en vanlig länk
a:visited - en besökt länk
a:hover - när du håller pekaren över den
a:active - ögonblicket du klickar på den

De måste stå i den här ordningen för att fungera.

Med hjälp av de här olika lägena kan man bestämma hur länkarna ska se ut. Men ibland vill man även ha (eller ganska ofta) en länk som är i ett femte läge. Till exempel om du vill ha en länk i som visar vilken sida man är på. Då kommer klasser in. Jag brukar ha en klass som heter "active" som är den aktiva sidans länk. Jag återkommer till det senare.

Lite extra info:

Jag kommer att använda en intern stilmall av bekvämlighetsskäl men man kan enkelt klistra in det i en extern stilmall om man så önskar.

Dessutom kommer jag att använda bilder för att visa koder. Det är för att det blir enklare att se men också för din egen skull då du blir tvungen att skriva det själv och därmed lär dig av det istället för att bara kopiera och klistra in.

Du kan ladda ner en zippad mapp här: ladda ner. Där har jag alla filer och bilder så du kan fokusera helt på menyn.

Meny med flikar

Nu ska jag skapa en sida med länkar som ser ut som flikar.
Först behöver vi en html sida. Jag har gjort i ordning en som du kan följa med på. Så du kan öppna menu1.html med en text editor. Öppna den sedan i din webbläsare för att kolla på den. Håll den sidan uppe för du kommer att återkomma till den ganska ofta.

. Som du kan se har jag inte lagt in några koder alls för för menyn bland css koderna. Så först ska vi skriva in en regel för själva behållaren. Jag har gett den menu som id. Alltså skriver vi in:
bild 1 för

för tillfället skriver vi inte in någon där. men där kan man bestämma höjden på själva elementet eller andra egenskaper.

Nu ska vi få bort prickarna från listan. Detta gör man med hjälp av ul taggen. Därför skriver vi:
bild 2 för

Med list-style bestämmer vi vilken form punkten ska ha eller att inte ha någon alls.

Som du förhoppningsvis märkt så är inte länkarna ordnade horisontellt. Det ska vi ändra på med hjälp av li taggarna.
bild 3 för

Med display anger man hur taggen/taggarna ska visas. Inline gör att de hamnar på rad.

Nu ska vi börja med hur länkarna ska se ut i dess normalläge. Vi ska bland annat bestämma storleken på flikarna. Man kan tro att man gör det med width och height, men det gör man inte. Istället använder man padding på a taggarna. Vi ska också sätta färg på dem.
bild 4 för

Jag har lagt paddingen på fyra olika rader för att ni lättare ska se vad jag gjort. Men man kan lika gärna skriva: padding: Xpx Xpx Xpx Xpx;
De står då i samma ordning som jag skrev dem innan; top, right, bottom och left.
Och om du kollar noga ser du att jag lagt olika pixlar på top och bottom. Då hamnar inte texten i mitten utan en bit ner.
Jag la även till en border under som kommer att fungera som en gräns senare.

Active state
Nu ska vi skapa en regel för den länken som visar vilken sida vi är på. Den ska ha vit bakgrundsfärg och en vit ramlinje så att den flyter ihop med innehållet. Så vi börjar med att skapa en regel för den klassen.
bild 5 för

För att visa att det är en klass börjar man med taggen som klassen finns i följt av en punkt och sen klassnamnet. a.active är då en klass som heter aktive och är en a tagg. Som du ser behöver man inte fylla i allt igen för den ärver fortfarande från vanliga länken.

Nu ska vi lägga till den klassen i första länken. Det gör man genom att skriva class="active" efter href="#".
bild 6 för

Till sist har vi hover. För när man håller pekaren över en flik vill jag att den ändrar färg.
bild 7 för

Nu är menyn nästan klar. Som du kanske märkt så ser det inte ut som flikar nu. Och den är dessutom inte vänsterjusterad. Därför ska vi avsluta med att lägga till några egenskaper.

Först fixar vi justeringen och margin så att länkarna ligger tätt inpå content-delen. I det här fallet är ul skurken. Den har en automatisk padding-left. Den tar vi bort. Dessutom har den en automatisk margin vilket vi också tar bort. Så gå till #menu ul och skriv in det här:
bild 8 för

Då nollställer du padding och margin. Men kollar du på sidan nu kommer du se att istället för att ligga i toppen på content så överlappar länkarna den. Det ska vi fixa med #menu regeln. Här gäller det att räkna paddingen och storleken på border så att den blir precis lika hög som länken. Vi har 10px uppe och 5px nere och sen en border på 1px. det blir alltså 16px. men skriver du in det händer det inte mycket. Det är för att texten har en storlek på 12px. den måste vi också lägga till. då blir det 28px
bild 9 för

Om du kollar på sidan nu så ser du att den är klar. Och även fast jag använt färger här så kan man använda bilder på olika sätt.

En annan sak som kan vara bra att veta är att om du lägger till float:left i #menu ul li a så packas länkarna tätt inpå varandra och mellanrummet försvinner.

Meny med bilder som bakgrund
Den här menyn är lite enklare och kommer bestå av två lägen. Den kommer att göras på ungefär samma sätt som den jag gjorde innan.

Öppna menu2, som finns i mappen du laddade ner, i en text editor. Öppna den även i din webbläsare. Som du ser är det samma sida.

Vi kommer även att göra menyn på samma sätt som vi gjorde innan men jag kommer att upprepa de stegen i alla fall.

Först ska vi skapa en regel för menu:
bild 10 för

Sen ska vi skapa en regel för att för ul där vi tar bort punkterna. Vi passar även på att ta bort paddingen på en gång:
bild 11 för

Sen går vi vidare på li:
bild 12 för

Nu kommer själva länken och det är här vi ska lägga till bilden. Först ska vi ta reda på hur stor bilden är i pixlar så gå in i mappen som du laddade ner och klicka på menugradient en gång. Då kan man se hur stor den är. Det går också att hålla pekaren över den tills en ruta kommer upp. Då kan vi se att den är 43 pixlar hög men bara 1px bred. bredden beror på att det är en upprepande bild så vi kan upprepa den i css koderna. Men hur ställer vi storleken på länkarna så att de blir lika höga som bilden? Just det, genom padding. så då kan vi räkna ut att om texten är 12px så har vi 31 pixlar kvar att fixa med padding. så hur gör man med det ojämna talet? Att ange en halv pixel fungerar inte. För det finns inget som heter en halv pixel. En pixel är ju det minsta en skärm kan visa.

Lösningen? Det finns ingen förutom att ange antingen en pixel större på ena paddingen eller en pixel på båda. Om du gjorde första menyn såg du att paddingen överlappade content-delen. Så det gör inget att paddingen är lite större än knapparna. Nu börjar vi med länkarna:
bild 13 för

Som du ser har jag angett paddingen så att höjden blir totalt 44 inklusive teckenstorleken. Sen la jag till bilden. Där har jag angett left för att veta att den blir vänsterjusterad. Man kan även ange center, top, bottom och right. Detta ger olika resultat. Störst skillnad blir det mellan bottom och top. Om du till exempel har en bild som du vill ska ligga så att den sticker upp långt över menyn ska du välja top. Men har du en pil som ska visas under länken väljer du bottom.

Sen angav jag repeat-x som gör så att bilden upprepas på bredden. repeat-y gör så att en bild upprepas på höjden.

Nu ska vi skapa en klass för aktiv status på länken och lägga till klassen i html-koden:
bild 14 för
bild 15 för

Där har jag bara ändrat vilken bild det är. Vi ska även ändra till samma bild i hover-läget:
bild 16 för

Nu var det faktiskt klart. Men man kan göra en sak till. Här kanske du vill att länkarna ska ligga precis brevid varandra. Då lägger du till float:left i #menu ul li a:
bild 17 för

Efterord:
Självklart kan du ändra hur texten i länkarna ser ut. Men förhoppningsvis vet du redan hur man ändrar färg på text. Vill du ha bort linjen under texten skriver du text-decoration:none;.

Hoppas du har lärt dig något nytt.

Bonus:
I mappen ligger det även två andra menyer jag gjort. Kolla hur jag byggt dem. De filerna innehåller kommentarer som förklarar lite om varför jag gjort precis så.

redmenu.html:
bild18.JPG
pil.html:
bild 19 för

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-01-18 10:35 #1 av: Juicy

Bra och utförligt skrivet. Tummen upp!

Anmäl
2010-01-18 12:03 #2 av: johan-ahlback

Tackar! Jag gör så gott jag kan Glad

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-01-20 18:11 #3 av: MoaW

Jättebra! Skrattande Men nu kommer jag med mina dumma frågor Tungan ute om man vill at bakgrundsbilden ska fortsätta över hela menyn, går det att lägga in det nånstans då? (har provat själv men måste missat nånstans för dom hamnar på olika höjd)

Anmäl
2010-01-20 20:02 #4 av: johan-ahlback

#3 det är största anledningen till att använda en div tagg som omsluter hela menyn. Men man kan få trixa lite med padding om man har otur.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-01-20 20:50 #5 av: MoaW

#4 Jag lyckades få till det, men det blev ett streck (1px) under bilden, innan den vita rutan, där bakgrundsfärgen visas (grå). Då sänkte jag padding-bottom med en px, då blev det bra... vet inte om man kan göra så, men det ser okej ut, tror jag.

Anmäl
2010-01-20 21:30 #6 av: johan-ahlback

jo det var så jag menade Glad

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2010-01-20 21:49 #7 av: MoaW

#6 okej va bra Flört då får den vara så.

 

Anmäl
2010-01-20 22:50 #8 av: IdaL

Jättebre artikel Johan! Skrattande

Anmäl

Det finns en till kommentar till den här diskussionen. Den är bara synlig för medlemmar på iFokus. För att läsa kommentaren, logga in eller registrera dig på iFokus.