Una guia pas a pas
Si el vostre menú de navegació és una fila horitzontal per la part superior o una fila vertical per la banda, encara és només una llista. Al dissenyar la navegació web, sovint és fàcil oblidar que un menú de navegació és només un grup d'enllaços glorificat. Però si programeu la vostra navegació amb XHTML + CSS, podeu crear un menú que sigui petit per descarregar (l'XHTML) i fàcil de personalitzar (CSS).
Començant
Per començar a dissenyar una llista per a la navegació, heu d'utilitzar una llista.
Pot ser una llista estàndard desordenada que s'ha identificat com a navegació:
Si observeu l'HTML, observeu que l'enllaç "Inici" també té una identificació de vostès aquí. Això us permetrà crear un menú que identifiqui la ubicació actual dels lectors. Fins i tot si no planeja tenir aquest tipus d'indicatiu visual al vostre lloc ara mateix, podeu incloure aquesta informació. Si decidiu afegir més endavant, tindreu menys codificació per preparar el vostre lloc.
Sense cap estil CSS , aquest menú XHTML sembla una llista estàndard desordenada. Hi ha bales i els elements de la llista són lleugerament indentats. Com que estic utilitzant enllaços de marcador de posició , la majoria dels navegadors no mostraran els enllaços com a clics (subratllats i en blau). Si enganxeu l'HTML anterior a una pàgina web, la vostra navegació serà així:
- Inici
- Productes
- Serveis
- Contacti amb nosaltres
Això és bastant avorrit i no sembla un menú. Però amb només uns quants estils CSS afegits a la llista, podeu crear un menú que us enorgulleixi.
Menú de navegació vertical
Un menú de navegació vertical és molt fàcil d'escriure perquè es mostra de la mateixa manera que una llista normal: amunt i avall.
Els ítems de la llista es mostren verticalment a la pàgina.
Quan estic formant menús, m'agrada començar a l'exterior i treballar. Amb això, vull dir que primer escric la navegació # ul i després es mouen als elements li i els enllaços, etc. Així que per a aquest menú, primer definiu l'amplada del menú. Això assegurarà que, fins i tot si els elements del menú són llargs, no aniran a la resta del disseny ni provoquin el desplaçament horitzontal.
ul # navigation {width: 12em; }
Una vegada que tinc el set d'ample, puc jugar amb els elements de la llista. Això em permet configurar coses com (per desfer-se de les bales), colors de fons, vores, alineació de text i marges.
ul # navigation li {
estil de llista: cap;
color de fons: # 039;
border-top: sòlid 1px # 039;
align-text: left;
marge: 0;
}
Una vegada que hàgiu establert els conceptes bàsics per als ítems de la llista, podeu començar a jugar amb la visualització del menú a l'àrea dels enllaços. Primer estil, la navegació UL # A i després l'enllaç A: A: visitada, A: passeu el ratolí i A: activa (si ho voleu). Per als enllaços, m'agradaria fer que els enllaços un element de bloc (en comptes de fer-ho per defecte en línia). Això els obliga a ocupar tot l'espai del LI, i actuen més com un paràgraf, el que els fa més fàcils d'estil com a botons de menú. L'altra cosa que sempre faig és eliminar el subratllat (text-decoration: none;), perquè això fa que els botons s'assemblen més als botons.
Però per descomptat, el vostre disseny pot ser diferent.
ul # navigation li a {
visualització: bloc;
text-decoració: cap;
farcit: .25em;
frontera inferior: sòlid 1px # 39f;
frontera-dreta: sòlida 1px # 39f;
}
Fixeu-vos que amb la visualització: bloc; establert en els enllaços, es pot fer clic a la casella sencera de l'element del menú, no només a les lletres. Això també és bo per a la usabilitat. Assegureu-vos d'establir els colors de l'enllaç (enllaç, visitat, desplaçat i actiu) si voleu que siguin diferents del blau, vermell i morat per defecte.
a: enllaç, a: visitat (color: #fff; }
a: passeu el ratolí, a: actiu {color: # 000; }
També vull donar una mica més d'atenció a l' estat del volant canviant el color de fons.
a: hover {background-color: #fff; }
Si voleu més exemples de menús verticals, consulteu la llista següent.
- Un menú vertical amb estil
- Una plantilla de menú vertical bàsica
- Un menú vertical amb estil que us trobeu aquí
- Una plantilla de menú vertical bàsica amb You Here Here
Menú de navegació horitzontal
La creació de menús de navegació horitzontals és una mica més difícil que els menús de navegació vertical, ja que heu de compensar el fet que les llistes HTML prefereixin mostrar-se verticalment. Igual que amb el menú horitzontal, primer creeu la vostra llista de menú de navegació :
Per crear un menú horitzontal, feu el mateix que ho feu amb el menú vertical. Comença amb l'exterior i treballa. Des que vull que la meva navegació comenci a la cantonada esquerra, l'ajunto amb 0 marge esquerre i farcit, i flotant a l'esquerra. També hauríeu d'acostumar-vos a establir l'amplada perquè el vostre menú no ocupi més o menys espai del que vulgueu. Per als menús horitzontals, això sol ser l'amplada total del disseny. També he afegit un color de fons a tota la llista per facilitar la lectura.
ul # navigation {
flota: esquerra;
marge: 0;
farcit: 0;
ample: 100%;
color de fons: # 039;
}
Però el secret del menú de navegació horitzontal es troba en els ítems de la llista. Els ítems de llista normalment són elements de bloc, el que significa que tindran una línia nova col·locada abans i després de cadascuna. Si canvieu la visualització des del bloc a la línia, obliga els elements de la llista a alinear-se al costat de l'altre en sentit horitzontal.
ul # navigation li {display: inline; }
Vaig tractar els enllaços exactament com els he tractat al menú de navegació vertical, amb els mateixos colors i la decoració de text. He afegit un límit superior per delimitar els botons quan es penja. L'única cosa que he eliminat era la visualització: bloc; ja que tornarà a introduir les línies noves i destruirà el menú horitzontal.
ul # navigation li a {
text-decoració: cap;
farcit: .25em 1em;
frontera inferior: sòlid 1px # 39f;
frontera superior: sòlid 1px # 39f;
frontera-dreta: sòlida 1px # 39f;
}
a: enllaç, a: visitat (color: #fff; }
ul # navigation li a: hover {
background-color: #fff;
color: # 000;
}
Sou aquí la informació d'ubicació
Un altre aspecte de l'HTML és l'identificador d'youehere. Si voleu modificar el vostre menú per indicar la ubicació actual dels vostres usuaris, simplement feu servir aquesta ID per definir un color de fons diferent o un altre estil. Mou l'atribut ID a l'element del menú correcte d'altres pàgines perquè la pàgina actual sempre estigui ressaltada.
ul # navigation li # youarehere a {background-color: # 09f; }
Si col·loqueu aquests estils junts a la vostra pàgina, podeu crear una barra de menú horitzontal o vertical que funcioni amb el vostre lloc, però es pot baixar de manera ràpida i molt fàcil d'actualitzar en el futur. L'ús de XHTML + CSS converteix les teves llistes en una eina molt potent per al disseny.
Si voleu més exemples de menús horitzontals, consulteu el següent.
- Un menú horitzontal amb estil
- Una plantilla de menú horitzontal bàsic
- Un menú horitzontal amb estil que us trobeu aquí
- Una plantilla de menú horitzontal bàsica amb You Here Here