01 de 06
Com crear navegació amb pestanyes amb CSS i sense imatges
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à.
Aquest menú amb pestanyes no utilitza cap imatge , 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à en tots els navegadors principals . L'explorador d'Internet no mostrarà les cantonades arrodonides, sinó que mostrarà pestanyes com Firefox, Safari, Opera i Chrome.
02 de 06
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 3
- id = "current"> Tabs
- Per
- Menús
Notaràs que el codi crida dues coses: class = "tablist" i id = "current". El primer és obligatori . Si no posa la classe de llista de taules a la llista desordenada, les fitxes no funcionaran. El segon és opcional. Posi l'id = "actual" en la que vulgueu ressaltar en aquesta pàgina. En general, faig servir per ressaltar la pàgina en què estic, però podeu usar-la per ressaltar la pestanya més important. O podeu eliminar-lo completament.
03 de 06
Comença a editar el full d'estil
Podeu utilitzar un full d'estil extern o un full d'estil intern . La pàgina del menú d'exemple utilitza un full d'estil intern al
En primer lloc, estilearem UL
Aquí és on utilitzem la llista de classes de classe 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. tablist Així doncs, la primera entrada del vostre CSS hauria de ser:
.tabist {}M'agrada ficar-me a la clau de punta (}) abans de temps, així que no ho oblidaré 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. Vaig triar 2em per la meva alçada, ja que és doble de la mida del tipus de lletra estàndard i dóna una meitat d'em sobre i a sota del text de la pestanya. alç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'estil mestre no té valors predeterminats per a les etiquetes UL i OL, voldreu introduir-les. Això vol dir que heu de desactivar les vores, els marges i el farcit al vostre 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; }04 de 06
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; }05 de 06
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, em dirigeixo als enllaços 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. He 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é he 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. He utilitzat la propietat de taquigrafia fronterera per posar la vora al voltant de tots els costats de quatre costats: 0.06em sòlids, 000; A continuació, utilitzeu la propietat de vora inferior per eliminar-la de la part inferior. límit inferior: 0;
A continuació, he fet alguns ajustaments 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, haureu d'afegir una regla d'estat per a alguns :.
M'agrada canviar el color del text i el fons per fer que la pestanya es posa al ratolí sobre ella. fons: # 3cf; color: #fff;
I vaig incloure un altre recordatori als navegadors que vull 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 a 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 a la regla .tablist que són: -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 regles d'estil final que he 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.
06 de 06
Ressalteu la pestanya actual
En l'HTML que he 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.
Estic tant l'etiqueta #current A com la #current 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.