Navigering på webbsidor är en form av en lista, och fliknavigering är som en horisontell lista. Det är ganska enkelt att skapa horisontell fliknavigering med CSS, men CSS 3 ger oss några fler verktyg för att få dem att se ännu snyggare ut.
Denna handledning tar dig igenom HTML och CSS som behövs för att skapa en CSS-flikmeny. Klicka på den länken för att se hur den ska se ut.
Den här flikmenyn använderinga bilder, bara HTML och CSS 2 och CSS 3. Det kan enkelt redigeras för att lägga till fler flikar eller ändra texten i dem.
Browser Support
Denna flikmeny kommer att fungeraalla större webbläsare. Internet Explorer visar inte de rundade hörnen, men annars kommer det att visa flikar som Firefox, Safari, Opera och Chrome.
Skriv din menylista
Alla navigeringsmenyer och flikar är egentligen bara en orörd lista. Så det första du vill göra är att skriva en orörd lista över länkar till var du vill att din fliknavigering ska gå.
Denna handledning förutsätter att du skriver din HTML i en textredigerare och att du vet var du ska placera HTML för din meny på din webbsida.
Skriv din oordnade lista så här:
class = "tablist">CSS 3id = "nuvarande"> FlikarFörmenyer
class = "tablist"ochid = "nuvarande".Den första är nödvändig. Om du inte sätter påtablistklass på din oordnade lista, fungerar flikarna inte. Den andra är valfri. Sättaid = "aktuell"på vilken flik du vill markera på den sidan. Vi brukar använda det här för att markera den sida som vi är på, men du kan använda den för att markera den viktigaste fliken. Eller du kan ta bort det helt.
Börja redigera ditt stilark
Du kan använda antingen ett externt stilark eller ett internt stilark. Exempel på menysidan använder ett internt stilark i
av dokumentet.Först ska vi utforma UL själv
Det är här vi använder klassentablist .I HTML. I stället för att utforma UL-taggen, som skulle utforma alla oordnade listor på din sida, ska du bara ställa in UL-klassen.tablist Så den första posten i din CSS ska vara:
.tablist {}
Vi gillar att sätta i den slutna lockiga bandet (}) före tid, så vi glömmer inte det senare.
Medan vi använder en oordnad listmärke för flikmeny listan, men vi vill inte ha några kulor eller siffror som kryper in. Så den första stilen du borde lägga till är.list-style: none; Detta berättar för webbläsaren att medan det är en lista är det en lista med inga förutbestämda stilar (som kulor eller nummer).
Därefter kan du ställa in höjden på din lista för att matcha det utrymme du vill fylla i. Vi valde 2em för vår höjd, eftersom det är dubbelt standardstorleken, och ger ungefär en halv em ovanför och under texten på fliken.höjd: 2em; Men du kan ställa in din bredd till vilken storlek du vill. UL-taggar tar automatiskt upp 100% av bredden, så om du inte vill att den ska vara mindre än den aktuella behållaren kan du lämna bredden ut.
Slutligen, om ditt masterkalkylblad inte har förinställningar för UL- och OL-taggar, vill du lägga in dem. Det betyder att du ska stänga av gränserna, marginalerna och vadderingen på din UL. padding: 0; marginal: 0; gränsen: ingen; Om du redan har återställt UL-taggen kan du ändra marginalerna, vadderingen eller gränsen till något som passar din design.
Din sista .tablist-klassen ska se ut så här:
.tablist {list-style: none; höjd: 2em; padding: 0; marginal: 0; gränsen: ingen; }
Redigering av LI-listobjekten
När du har stylat din oordnade lista måste du ställa in LI-taggarna inuti den. Annars kommer de att fungera som en standardlista och varje flyttning till nästa rad utan att placera dina flikar korrekt.
Först, sätt upp din stilegenskap:
.tablist li {}
Då vill du flyta dina flikar så att de sträcker sig på horisontalplanet. flyta till vänster;
Och glöm inte att lägga till någon marginal mellan flikarna, så de slår inte samman. margin-höger: 0.13em;
Din Li-stilar ska se ut så här:
.tablist li {float: left; margin-höger: 0.13em; }
Att göra flikarna ser ut som flikar med CSS 3
För att göra det mesta av den tunga lyftningen i det här stilarket riktar vi in länkarna inom den oordnade listan. Webbläsare känner igen att länkar gör mer på en webbsida än andra taggar, så det är lättare att få äldre webbläsare att överensstämma med saker som hover-stater om du bifogar dem till ankaretiketten (länkar). Skriv så först dina stilegenskaper:
.tablist li a {} .tablist li a: hover {}
Eftersom dessa flikar ska fungera som flikar i en applikation, vill du att hela fliken av fliken ska kunna klickas, inte bara den länkade texten. För att göra detta måste du konvertera A-taggen från det normala "inline" -tillståndet till ett blockelement. display: block; (Om du är intresserad av att veta mer om skillnaden, läs Block-Level vs Inline Elements.)
Då är ett enkelt sätt att tvinga dina flikar att vara symmetriska med varandra, men ändå flex för att passa bredden på texten är att göra höger och vänster padding samma. Vi använde padding shorthand egenskapen att ställa upp och ner till 0 och höger och vänster till 1em. vaddering: 0 1em;
Vi valde också att ta bort länkens understreck, så att flikarna ser mindre ut som länkar.Men om din publik kan bli förvirrad av det, lämna ut den här raden. länk-decoration: none;
Genom att sätta en tunn kant runt flikarna, så får de se ut som flikar. Vi använde gränsen shorthand egenskapen att sätta gränsen runt alla fyra sidor gräns: 0,06em fast # 000; Och sedan använde egenskapen gränsbotten för att ta bort den från botten. border-bottom: 0;
Sedan gjorde vi några justeringar av flikens teckensnitt, färg och bakgrundsfärg. Ställ in dessa på de stilar som matchar din webbplats. typsnitt: fet 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; bakgrundsfärg: #ccc;
Alla ovanstående stilar ska gå i väljaren.tablist li a, regeln så att de påverkar ankarkorgen i allmänhet. För att få flikarna att visas mer klickbara borde du lägga till några statliga regler.tablist li a: hover.
Vi gillar att ändra färgen på texten och bakgrunden för att få fliken pop när du musen över den. Bakgrund: # 3cf; färg: #fff;
Och vi inkluderade en annan påminnelse till webbläsarna som vi vill att länken ska förbli inte understruken. text-decoration: none; En annan vanlig metod är att vrida underlaget tillbaka när du musen över fliken. Om du vill göra det, ändra det till text-decoration: underline;
Men var är CSS 3?
Om du har uppmärksammat har du säkert märkt att det inte har funnits några CSS 3-stilar som används i stilarket. Detta har fördelen av att arbeta i en modern webbläsare, inklusive Internet Explorer. Men det får inte flikarna att se ut som något annat än fyrkantiga lådor. Genom att lägga till en CSS 3 Style Call-radius (och det är associerade webbläsarspecifika samtal) kan du göra kanterna avrundade, för att se mer ut som flikar i en manila-mapp.
De stilar du borde lägga till i .tablist li a regel är: -webkit-border-top-right-radie: 0.50em; -webkit-border-top-left-radie: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topLeft: 0.50em; border-top-right-radie: 0.50em; border-top-vänster-radie: 0.50em;
Det här är de sista stilreglerna som vi skrev:
.tablist li a {display: block; vaddering: 0 1em; text-decoration: none; gräns: 0,06em fast # 000; border-bottom: 0; typsnitt: fet 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; bakgrundsfärg: #ccc; / * CSS 3 element * / webkit-gräns-topp-högra radie: 0.50em; -webkit-border-top-left-radie: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topLeft: 0.50em; border-top-right-radie: 0.50em; border-top-vänster-radie: 0.50em; } .tablist li a: hover {background: # 3cf; färg: #fff; text-decoration: none; }
Med dessa stilar har du en flikmeny som fungerar i alla större webbläsare och ser ut som fina utskrivna flikar i CSS 3-kompatibla webbläsare. På nästa sida får du ytterligare ett alternativ som du kan använda för att klä upp det ännu mer.
Markera fliken Aktuell
I den HTML som vi skapade hade UL ett listelement med ett ID. Detta gör att du kan ge en LI en annan stil än resten. Den vanligaste situationen är att få den aktuella fliken att stå ut på något sätt. Ett annat sätt att tänka på detta är att du vill gråta ut flikarna som inte är levande. Du ändrar sedan var id finns på de olika sidorna.
Vi utformar både #rkurrent A-taggen och #ströms A: svävarstaven så att båda är lite annorlunda. Du kan ändra färg, bakgrundsfärg, jämn höjd, bredd och vaddering av det elementet. Gör vad som helst ändringar ger mening i din design.
.tablist li # current a {bakgrundsfärg: # 777; färg: #fff; } .tablist li # current a: svävar {bakgrund: # 39C; }
Och du är klar! Du har just skapat en flikmeny för din webbplats.
