Navigatie op webpagina's is een vorm van een lijst en navigatie met tabbladen is als een horizontale lijst. Het is vrij eenvoudig om horizontale navigatie met tabbladen te maken met CSS, maar CSS 3 geeft ons nog een paar tools om ze er nog mooier uit te laten zien.
Deze tutorial neemt je mee door de HTML en CSS die nodig zijn om een CSS-menu met tabbladen te maken. Klik op die link om te zien hoe het eruit zal zien.
Dit menu met tabbladen gebruiktgeen afbeeldingen, alleen HTML en CSS 2 en CSS 3. Het kan eenvoudig worden bewerkt om meer tabbladen toe te voegen of de tekst erin te wijzigen.
Browserondersteuning
Dit tabbladmenu zal werkenalle belangrijke browsers. Internet Explorer geeft de afgeronde hoeken niet weer, maar anders worden er tabbladen weergegeven zoals Firefox, Safari, Opera en Chrome.
Schrijf je menulijst
Alle navigatiemenu's en tabbladen zijn eigenlijk gewoon een ongeordende lijst. Dus het eerste dat u wilt doen, is een ongeordende lijst met links schrijven naar waar u uw navigatie met tabs naartoe wilt.
Deze tutorial gaat ervan uit dat je je HTML schrijft in een teksteditor en dat je weet waar je de HTML voor je menu op je webpagina moet plaatsen.
Schrijf uw ongeordende lijst als volgt:
class = "tablist">CSS 3id = "current"> TabsVoormenu's
class = "tablist"enid = "current".De eerste is verplicht. Als u detablistklasse op uw ongeordende lijst, zullen de tabbladen niet werken. De tweede is optioneel. Zet deid = "current"op welk tabblad je op die pagina wilt worden gemarkeerd. We gebruiken dit meestal om de pagina te markeren waarop we ons bevinden, maar u kunt dit gebruiken om het belangrijkste tabblad te markeren. Of u kunt het volledig verwijderen.
Begin met het bewerken van uw stylesheet
U kunt een externe stijlpagina of een interne stijlpagina gebruiken. De voorbeeldmenupagina gebruikt een interne stijlpagina in de
van het document.Eerst zullen we de UL zelf stylen
Dit is waar we de klas gebruikentablist .in de HTML. In plaats van het stylen van de UL-tag, die alle ongeordende lijsten op uw pagina zou stylen, zou u alleen de UL-klasse moeten stylen.tablist Dus de eerste vermelding in uw CSS moet zijn:
.tablist {}
We plaatsen de juiste accolade (}) graag op de voorgrond, dus we vergeten het later niet.
Terwijl we een niet-geordende lijst gebruiken voor de lijst met tabmenu's, maar we willen niet dat er kogels of nummers in kruipen. Dus de eerste stijl die je zou moeten toevoegen is.list-style: none; Dit vertelt de browser dat terwijl het een lijst is, het een lijst is met geen vooraf bepaalde stijlen (zoals kogels of cijfers).
Vervolgens kunt u de hoogte van uw lijst instellen zodat deze overeenkomt met de ruimte die u wilt vullen. We kozen voor 2em voor onze lengte, want dat is het dubbele van de standaard lettertypegrootte en geeft ongeveer een halve em boven en onder de tekst van het tabblad.Hoogte: 2em; Maar u kunt uw breedte instellen op elke gewenste grootte. UL-tags nemen automatisch 100% van de breedte in beslag, dus tenzij u wilt dat deze kleiner is dan de huidige container, kunt u de breedte weglaten.
Ten slotte, als uw hoofdstijlblad geen voorinstellingen heeft voor UL- en OL-tags, wilt u ze erin plaatsen. Dit betekent dat u de randen, marges en opvulling op uw UL zou moeten uitschakelen. padding: 0; margin: 0; rand: geen; Als u de UL-tag al hebt gereset, kunt u de marges, opvulling of rand wijzigen in iets dat bij uw ontwerp past.
Je definitieve .tablist-klasse zou er als volgt uit moeten zien:
.tablist {lijststijl: geen; Hoogte: 2em; padding: 0; margin: 0; rand: geen; }
De LI-lijstitems bewerken
Nadat je je ongeordende lijst hebt gestileerd, moet je de LI-tags erin stijlen. Anders handelen ze als een standaardlijst en gaan ze naar de volgende regel zonder uw tabbladen correct te plaatsen.
Stel eerst je stijleigenschap in:
.tablist li {}
Dan wil je je tabs zweven zodat ze in het horizontale vlak staan. float: left;
En vergeet niet om wat marge tussen de tabbladen toe te voegen, zodat ze niet samen worden samengevoegd. margin-right: 0.13em;
Je li-stijlen moeten er als volgt uitzien:
.tablist li {float: left; margin-right: 0.13em; }
De tabbladen eruit laten zien als tabs met CSS 3
Om het grootste deel van het zware werk in dit stylesheet te doen, richten we ons op de links in de ongeordende lijst. Browsers herkennen dat koppelingen meer doen op een webpagina dan andere tags, dus het is gemakkelijker om oudere browsers te laten voldoen aan dingen zoals zweeftoestanden als u ze aan de ankertag (links) koppelt. Dus schrijf eerst je stijleigenschappen:
.tablist li a {} .tablist li a: hover {}
Omdat deze tabbladen als tabbladen in een toepassing moeten werken, wilt u dat het volledige gebied van het tabblad kan worden aangeklikt, niet alleen de gekoppelde tekst. Om dit te doen, moet u de A-tag van zijn normale "inline" -status omzetten in een blokelement. display: block; (Lees Block-Level vs. Inline Elements als je meer wilt weten over het verschil.)
Dan is een eenvoudige manier om je tabs te dwingen om symmetrisch te zijn met elkaar, maar nog steeds flexibel om in de breedte van de tekst te passen, de juiste en de linker padding hetzelfde te maken. We gebruikten de padding-eigenschap padding om de boven- en onderkant in te stellen op 0 en de rechter- en linkerzijde op 1em. opvulling: 0 1em;
We hebben ook gekozen om de onderstrepingen van de links te verwijderen, zodat de tabbladen er minder als links uitzien.Maar als je publiek daardoor in verwarring raakt, laat deze regel dan buiten beschouwing. Link-decoration: none;
Door een dunne rand rondom de tabbladen te plaatsen, zien ze eruit als tabbladen. We gebruikten de eigenschap border shorthand om de rand rondom alle vier zijden te plaatsen grens: 0,06em vast # 000; En gebruik vervolgens de eigenschap border-bottom om deze van onder af te verwijderen. border-bottom: 0;
Vervolgens hebben we enkele aanpassingen aangebracht in het lettertype, de kleur en de achtergrondkleur van de tabbladen. Stel deze in op de stijlen die overeenkomen met uw site. lettertype: vet 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; background-color: #ccc;
Alle bovenstaande stijlen zouden in de selector moeten gaan.tablist li a, de regel zodat ze de ankertags in het algemeen beïnvloeden. Als u wilt dat de tabbladen klikbaarder lijken, voegt u een paar regels toe.tablist li a: hover.
We willen de kleur van de tekst en achtergrond wijzigen om het tabblad te laten knallen wanneer je er met de muis overheen gaat. background: # 3cf; color: # fff;
En we hebben een andere herinnering toegevoegd aan de browsers dat we willen dat de link niet onderstreept blijft. text-decoration: none; Een andere veelgebruikte methode is om de onderstreping weer in te schakelen wanneer u met de muis over het tabblad beweegt. Als je dat wilt doen, verander het naar text-decoration: onderstrepen;
Maar waar is de CSS 3?
Als je oplet, heb je waarschijnlijk gemerkt dat er geen CSS 3-stijlen zijn gebruikt in de stijlpagina. Dit heeft het voordeel van werken in elke moderne browser, inclusief Internet Explorer. Maar het maakt de tabbladen niet meer dan vierkante vakken. Door een borderstraal in CSS 3-stijl toe te voegen (en aan de browser gerelateerde oproepen te doen), kunt u de randen afgerond laten lijken op tabbladen in een manilla-map.
De stijlen die u moet toevoegen aan de .tablist li a regel zijn: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-linksboven: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em;
Dit zijn de definitieve stijlregels die we schreven:
.tablist li a {display: block; opvulling: 0 1em; text-decoration: none; grens: 0,06em vast # 000; border-bottom: 0; lettertype: vet 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; background-color: #ccc; / * CSS 3 elementen * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-linksboven: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em; } .tablist li a: hover {background: # 3cf; color: # fff; text-decoration: none; }
Met deze stijlen beschikt u over een menu met tabbladen dat werkt in alle belangrijke browsers en ziet het eruit als mooie afgedrukte tabbladen in browsers die voldoen aan CSS 3. De volgende pagina geeft je nog een optie die je kunt gebruiken om het nog meer te versieren.
Markeer het huidige tabblad
In de HTML die we hebben gemaakt, had de UL één lijstelement met een ID. Hiermee kun je de ene LI een andere stijl geven dan de rest. De meest voorkomende situatie is om het huidige tabblad op de een of andere manier te laten opvallen. Een andere manier om hieraan te denken is dat u de tabbladen die niet live zijn grijs wilt maken. U wijzigt vervolgens waar de id zich op de verschillende pagina's bevindt.
We stylen zowel de tag # current A als de # current A: hover sta, zodat beide iets verschillen. U kunt de kleur, achtergrondkleur, zelfs de hoogte, breedte en opvulling van dat element wijzigen. Breng elke verandering in uw ontwerp aan.
.tablist li # current a {background-colour: # 777; kleur: #fff; } .tablist li # current a: hover {background: # 39C; }
En je bent klaar! U hebt zojuist een menu met tabbladen voor uw website gemaakt.
