Unha guía paso a paso
Se o menú de navegación é unha liña horizontal pola parte superior ou unha fila vertical ao carón, aínda é só unha lista. Ao deseñar a navegación web, moitas veces é fácil esquecer que un menú de navegación é só un grupo de enlaces glorificado. Pero se programas a túa navegación usando XHTML + CSS, podes crear un menú pequeno para descargar (o XHTML) e fácil de personalizar (o CSS).
Comezando
Para comezar a deseñar unha lista para a navegación, necesitas empregar unha lista.
Pode ser unha lista estándar desordenada que foi identificada como a navegación:
Se observas de cerca o HTML, notarás que a ligazón "Inicio" tamén ten unha ID de vostede aquí. Isto permitirá que cree un menú que identifique a situación actual dos seus lectores. Aínda que non planifique ter ese tipo de visor visual no seu sitio agora mesmo, pode incluír esa información. Se decidiu engadir a cea máis tarde, terá menos codificación para preparar o seu sitio.
Sen ningún estilo CSS , este menú XHTML parece unha lista estándar desordenada. Hai balas e os elementos da lista están un pouco sangrados. Porque estou usando enlaces de marcador de posición , a maioría dos navegadores non mostrarán as ligazóns como se faga clic (subliñado e en azul). Se pega no HTML anterior nunha páxina web, a súa navegación será así:
- Inicio
- Produtos
- Servizos
- Contacta connosco
Isto é moi aburrido e non se parece moito a un menú. Pero con só algúns estilos CSS engadidos á lista, podes crear un menú que o orgullo.
Menú de navegación vertical
Un menú de navegación vertical é moi sinxelo de escribir porque se mostra da mesma forma que unha lista normal: arriba e abaixo.
Os elementos da lista mostran verticalmente a páxina.
Cando estou a estilizar os menús, gustaríame comezar no exterior e traballar. Con isto, quero dicir que primeiro fago a navegación ul # e logo pasarei aos elementos li e as ligazóns, etc. Así que para este menú, primeiro defines o ancho do menú. Isto asegurarase de que, mesmo se os elementos do menú son longos, non empurrarán o resto do deseño ou provocarán o desprazamento horizontal.
ul # navigation {width: 12em; }
Unha vez que teño o ancho definido, podo xogar cos elementos da lista. Isto permíteme definir cousas como (para desfacerse das balas), cores de fondo, bordos, aliñamento de texto e marxes.
ul # navigation li {
estilo de lista: ningún;
cor de fondo: # 039;
border-top: sólido 1px # 039;
alinear texto: esquerda;
marxe: 0;
}
Unha vez que configure os conceptos básicos dos elementos da lista, pode comezar a xogar con como se ve o menú na área de ligazóns. Primeiro estilo a navegación de navegación UL # A ea continuación a ligazón A: A: visitada, A: pasada e A: activa (se o desexa). Para os enlaces, gústame facer os enlaces un elemento de bloque (en lugar de por defecto en liña). Isto obriga-los a ocupar todo o espazo do LI, e actúan máis como un parágrafo, o que os fai máis sinxelos como botóns de menú. A outra cousa que sempre fago é eliminar o subliñado (text-decoration: none;), pois isto fai que os botóns parécense máis a botóns.
Pero claro, o teu deseño pode ser diferente.
ul # navigation que a {
mostrar: bloque;
text-decoration: ningunha;
padding: .25em;
fronteira inferior: 1px sólido # 39f;
border-right: sólido 1px # 39f;
}
Observe que coa pantalla: bloque; Establecer nas ligazóns, pode facer clic na caixa enteira do elemento do menú, non só as letras. Isto tamén é bo para a usabilidade. Asegúrese de establecer as cores da ligazón (ligazón, visita, desprazamento e activa) se quere que sexan diferentes do azul, vermello e vermello por defecto.
a: ligazón, a: visitada {cor: #fff; }
a: paira, a: activa {cor: # 000; }
Tamén me gustaría darlle un pouco máis atención ao estado de desprazamento ao cambiar a cor de fondo.
a: hover {background-color: #fff; }
Se desexa máis exemplos de menús verticais, consulte a seguinte lista.
- Un menú vertical estilizado
- Unha plantilla de menú vertical básica
- Un menú vertical estilizado con vostede está aquí
- Unha plantilla de menú vertical básica con vostede está aquí
Menú de navegación horizontal
A creación de menús de navegación horizontal é un pouco máis difícil que os menús de navegación vertical porque ten que compensar o feito de que as listas de HTML prefiren amosar verticalmente. Do mesmo xeito que co menú horizontal, primeiro cree a súa lista de menú de navegación :
Para crear un menú horizontal, funciona o mesmo que fixeches co menú vertical. Comezar co exterior e traballar. Desde que quero que a miña navegación comece na esquina esquerda, configurouna con 0 marxe esquerda e recheo, e flutuámola á esquerda. Tamén debería poñerse co hábito de configurar o ancho para que o seu menú non teña máis ou menos espazo do que pretende. Para menús horizontais, normalmente é o ancho total do deseño. Tamén engadín unha cor de fondo a toda a lista para facilitar a lectura.
ul # navigation {
flotar: esquerda;
marxe: 0;
padding: 0;
ancho: 100%;
cor de fondo: # 039;
}
Pero o segredo do menú de navegación horizontal está nos elementos da lista. Os elementos da lista son normalmente elementos de bloque, o que significa que terán unha liña nova colocada antes e despois de cada un. Ao cambiar a pantalla desde o bloque ata a liña, forzará os elementos da lista a aliñarse horizontalmente.
ul # navigation li {mostrar: en liña; }
Tratarei as ligazóns exactamente como as tratei no menú de navegación vertical, coas mesmas cores e decoración de texto. Agregue un borde superior para delinear os botóns cando se pasen por encima. O único que elimine foi a pantalla: bloqueo; xa que iso poñerá as novidades de volta e destruirá o menú horizontal.
ul # navigation que a {
text-decoration: ningunha;
estofado: .25em 1em;
fronteira inferior: 1px sólido # 39f;
border-top: sólido 1px # 39f;
border-right: sólido 1px # 39f;
}
a: ligazón, a: visitada {cor: #fff; }
ul # navigation que a: hover {
cor de fondo: #fff;
cor: # 000;
}
Estás aquí Información de localización
Outro aspecto do HTML é o identificador de vostede. Se desexa modificar o seu menú para indicar a localización actual dos seus usuarios, simplemente use esta ID para definir unha cor de fondo diferente ou outro estilo. Mova o atributo ID ao elemento do menú correcto noutras páxinas para que a páxina actual sempre estea resaltada.
ul # navigation li # youarehere a {background-color: # 09f; }
Se coloque estes estilos na súa páxina, pode crear unha barra de menú horizontal ou vertical que funcione co seu sitio pero que se poida descargar de forma rápida e moi fácil de actualizar no futuro. Usando XHTML + CSS converte as túas listas nunha ferramenta de deseño moi potente.
Se desexa máis exemplos de menús horizontais, consulte o seguinte.
- Un menú horizontal estilo
- Unha plantilla de menú horizontal básica
- Un menú horizontal estilo con vostede está aquí
- Unha plantilla de menú horizontal básica con vostede está aquí