La navegació a les pàgines web és una forma d'una llista i la navegació amb pestanyes és com una llista horitzontal. És bastant fàcil crear navegació amb pestanyes horitzontals amb CSS, però CSS 3 ens proporciona unes quantes eines més per fer-les veure encara més agradables.
Aquest tutorial us portarà a través de l'HTML i CSS necessaris per crear un menú amb pestanyes CSS. Feu clic en aquest enllaç per veure com es veurà.
S'utilitza aquest menú amb pestanyessense imatges, només HTML i CSS 2 i CSS 3. Es pot editar fàcilment per afegir més pestanyes o canviar-ne el text.
Suport del navegador
Aquest menú de pestanyes funcionaràtots els navegadors principals. Internet Explorer no mostrarà les cantonades arrodonides, sinó que mostrarà pestanyes com Firefox, Safari, Opera i Chrome.
Escriu la vostra llista de menús
Tots els menús de navegació i pestanyes són realment una llista desordenada. Així que el primer que voleu fer és escriure una llista desordenada d'enllaços a on voleu que la vostra navegació amb pestanyes es vagi.
Aquest tutorial suposa que està escrivint el vostre HTML en un editor de text i que sap on col·locar el codi HTML del vostre menú a la vostra pàgina web.
Escriviu la vostra llista desordenada com aquesta:
class = "tablist">CSS 3id = "current"> TabsPerMenús
class = "tablist"iid = "actual".El primer és obligatori. Si no el posesllista de taulesclasse a la vostra llista desordenada, les pestanyes no funcionaran. El segon és opcional. Posar laid = "actual"en la que vulgueu ressaltar en aquesta pàgina. Normalment fem servir això per ressaltar la pàgina en què estem connectats, però podeu utilitzar-la per ressaltar la pestanya més important. O podeu eliminar-lo completament.
Comença a editar el full d'estil
Podeu utilitzar un full d'estil extern o un full d'estil intern. La pàgina de menú mostra un full d 'estil intern al
del document.En primer lloc, estilearem UL
Aquí és on fem servir la classellista de taules en l'HTML. En lloc d'utilitzar l'etiqueta UL, que estilitzarà totes les llistes desordenades de la vostra pàgina, heu d'estil només la classe UL.llista de taules Així doncs, la primera entrada al vostre CSS hauria de ser:
.tabist {}
Ens agrada ficar endavant amb la clau (}) abans de temps, així que no ho oblidem més endavant.
Tot i que estem utilitzant una etiqueta de llista desordenada per a la llista de menús de pestanyes, però no volem que s'arrosseguisin cap bales o números. Per tant, el primer estil que heu d'afegir és.estil de llista: cap; Això indica al navegador que mentre es tracta d'una llista, és una llista sense estils predeterminats (com ara bales o números).
A continuació, podeu establir l'alçada de la vostra llista perquè coincideixi amb l'espai que voleu que ompli. Triem 2em per a la nostra alçada, ja que és doble de la mida de font estàndard, i dóna una meitat d'em superior i inferior al text de la pestanya. Elalçada: 2em; Però podeu configurar l'amplada a la mida que vulgueu. Les etiquetes UL acceptaran automàticament el 100% de l'amplada, de manera que, tret que vulgueu que sigui més petit que el contenidor actual, podeu deixar l'amplada.
Finalment, si el vostre full d'estils mestre no té preseleccionats per a les etiquetes UL i OL, voldreu posar-los in. Això vol dir que haureu d'apagar les vores, els marges i el farcit a la vostra UL. farcit: 0; marge: 0; frontera: cap; Si ja heu restablert l'etiqueta UL, podeu canviar els marges, el farcit o el límit a alguna cosa que s'ajusti al vostre disseny.
La vostra classe final de .tablist hauria de ser així:
.tabist {list-style: none; alçada: 2em; farcit: 0; marge: 0; frontera: cap; }
Edició dels elements de la llista LI
Una vegada que heu dissenyat la vostra llista desordenada, heu d'etiquetar les etiquetes LI dins. En cas contrari, actuaran com una llista estàndard i cada pas a la següent línia sense col · locar correctament les pestanyes.
Primer, configureu la vostra propietat d'estil:
.tablist li {}
A continuació, voleu flotar les vostres pestanyes perquè s'uneixin al pla horitzontal. flota: esquerra;
I no oblideu afegir un marge entre les pestanyes, de manera que no es fusionen. marge-dret: 0.13em;
Els vostres estils han de ser així:
.tablist li {float: left; marge-dret: 0.13em; }
Fer que les fitxes es vegin com a pestanyes amb CSS 3
Per fer la majoria de l'aixecament pesat d'aquest full d'estils, estem orientant els enllaços dins de la llista desordenada. Els navegadors reconeixen que els enllaços fan més en una pàgina web que altres etiquetes, per la qual cosa és més fàcil que els navegadors antics compleixin coses com ara els estats de desplaçament automàtic si els uniu a l'etiqueta d'ancoratge (enllaços). Per tant, escriviu primer les propietats del vostre estil:
.tablist li a {} .tablist li a: hover {}
Com que aquestes pestanyes han d'actuar com a pestanyes en una aplicació, voleu que es faci clic a tota l'àrea de la pestanya, no només al text enllaçat. Per fer-ho, heu de convertir l'etiqueta A des de l'estat "inline" normal en un element de bloc. visualització: bloc; (Si esteu interessats en saber més sobre la diferència, llegiu els nivells del bloc en comparació amb els elements en línia).
A continuació, una manera senzilla d'obligar les pestanyes a ser simètriques entre si, però encara flexibles per adaptar-se a l'amplada del text és fer que el farcit dret i esquerre sigui el mateix. Hem utilitzat la propietat de taquigrafia de farciment per establir la part superior i la inferior a la dreta i la dreta a la 1a. farcit: 0 1em;
També hem optat per eliminar l'enllaç subratllat, de manera que les pestanyes es veuen menys enllaços.Però si el vostre públic pot estar confós amb això, deixeu aquesta línia. enllaç-decoració: cap;
Al col·locar una vora prima sobre les pestanyes, els fa semblar pestañas. Hem utilitzat la propietat de taquigrafia fronterera per posar la vora dels quatre costats border: 0.06em solid # 000; A continuació, utilitzeu la propietat de vora inferior per eliminar-la de la part inferior. límit inferior: 0;
Després vam fer alguns ajustos a la font, el color i el color de fons de les pestanyes. Establiu-los als estils que coincideixen amb el vostre lloc. font: en negreta 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; color de fons: #ccc;
Tots els estils anteriors han d'anar al selector.tablist li a, la regla perquè afectin les etiquetes d'ancoratge en general. A continuació, per fer que les pestanyes es mostrin més clics, heu d'afegir una regla d'estat.tablist li a: passejar.
Ens agrada canviar el color del text i el fons per fer que la pestanya es posa al ratolí. fons: # 3cf; color: #fff;
I incloem un altre recordatori als navegadors que volem que l'enllaç no quedi subratllat. text-decoració: cap; Un altre mètode comú és encendre el subratllat quan feu clic a sobre de la pestanya. Si voleu fer-ho, canvieu-lo text-decoration: underline;
Però, on és el CSS 3?
Si heu estat prestant atenció, probablement hàgiu notat que no s'han fet servir cap estil CSS 3 al full d'estils. Això té l'avantatge de treballar en qualsevol navegador modern, inclòs l'Internet Explorer. Però no fa que les fitxes s'assemblin més que quadres quadrats. Si afegiu un radi de vora anomenat a l'estil CSS 3 (i les trucades específiques del navegador associades), podeu fer que les arestes siguin arrodonides, per veure's més com a pestanyes en una carpeta de manila.
Els estils que heu d'afegir al .tablist li a la regla és: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; límit superior-dret-radi: 0.50em; límit superior a la barra esquerra: 0,50 fem;
Aquestes són les normes d'estil final que hem escrit:
.tablist li a {display: bloc; farcit: 0 1em; text-decoració: cap; border: 0.06em solid # 000; límit inferior: 0; font: en negreta 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; color de fons: #ccc; / * Elements CSS 3 * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; límit superior-dret-radi: 0.50em; límit superior a la barra esquerra: 0,50 fem; } .tablist li a: hover {background: # 3cf; color: #fff; text-decoració: cap; }
Amb aquests estils, teniu un menú amb pestanyes que funciona en tots els navegadors principals i es veu com a fitxes imprimides en navegadors compatibles amb CSS 3. La pàgina següent us ofereix una opció més per a vestir-la encara més.
Ressalteu la pestanya actual
En el codi HTML que hem creat, el UL tenia un element de llista amb una identificació. Això li permet donar una LI a un estil diferent de la resta. La situació més comuna és fer que la pestanya actual es destaqui d'alguna manera. Una altra forma de pensar d'això és que voleu eliminar les pestanyes que no estan en directe. A continuació, canvieu on està la identificació a les diferents pàgines.
Tenim l'estil tant de la #a etiqueta actual com de la #a corrent A: hover sta, de manera que tots dos són lleugerament diferents. Podeu canviar el color, el color de fons, fins i tot l'alçada, l'amplada i el farcit d'aquest element. Realitzeu els canvis que tinguin sentit en el vostre disseny.
.tablist li # current a {background-color: # 777; color: #fff; } .tablist li # current a: hover {background: # 39C; }
I ja has acabat! Acabeu de crear un menú amb pestanyes per al vostre lloc web.
