Ya sea que el menú de navegación de su sitio web sea una fila horizontal en la parte superior o una fila vertical en el lateral, es solo una lista. Al diseñar navegación web, un menú de navegación es un grupo de enlaces. Cuando programa su navegación usando XHTML + CSS, puede crear un menú que es pequeño para descargar (XHTML) y fácil de personalizar (CSS).
Empezando
Para diseñar una lista para la navegación, necesita usar una lista. Puede ser una lista desordenada estándar que se ha identificado como navegación. Por ejemplo:
- Casa
- Productos
- Servicios
- Contáctenos
Al mirar el HTML, el enlace de Inicio tiene un ID de.
estás aquí
Esto le permite crear un menú que identifica la ubicación actual para sus lectores. Incluso si no planea tener ese tipo de señal visual en su sitio en este momento, puede incluir esa información. Si decide agregar la señal más tarde, tendrá menos codificación para preparar su sitio.
Sin ningún Estilo CSS, este menú XHTML parece una lista desordenada estándar. Hay viñetas y los elementos de la lista están ligeramente sangrados. Cuando usas
enlaces de marcador de posición, la mayoría de los navegadores no muestran los enlaces como en los que se puede hacer clic (subrayados y en azul). Cuando pega el HTML en una página web, su navegación se ve así:- Casa
- Productos
- Servicios
- Contáctenos
Esto no se parece mucho a un menú. Sin embargo, con algunos estilos CSS agregados a la lista, puede crear un menú que lo enorgullezca.
Si desea obtener más ejemplos de menús verticales, realice una búsqueda en la web de lo siguiente:
- Un menú vertical con estilo
- Una plantilla de menú vertical básica
- Un menú vertical con estilo con You Are Here
- Una plantilla de menú vertical básica con You Are Here
Menú de navegación vertical
Un menú de navegación vertical es fácil de escribir porque se muestra de la misma manera que una lista normal: arriba y abajo. Los elementos de la lista se muestran verticalmente hacia abajo en la página.
Cuando diseñe menús, comience por el exterior y trabaje hacia adentro. Primero, diseñe la navegación:
ul # navegación
Luego, muévete a los elementos y enlaces. Primero, defina el ancho del menú. Esto asegura que si los elementos del menú son largos, los elementos no desplazarán el resto del diseño ni provocarán un desplazamiento horizontal.
ul # navegación {ancho: 12em; }
Después de establecer el ancho, trabaje en los elementos de la lista. Esto le permite configurar cosas como colores de fondo, bordes, alineación de texto y márgenes.
ul # navigation li {
estilo de lista: ninguno;
color de fondo: # 039;
borde superior: sólido 1px # 039;
alineación de texto: izquierda;
margen: 0;
}
Después de configurar los conceptos básicos para los elementos de la lista, trabaje en cómo se ve el menú en el área de enlaces. Primero estilo la navegación:
UL # navegación LI A
Luego, diseñe lo siguiente:
Un enlace
A: visitado
A: flotar
A: activo
Para los enlaces, conviértalos en un elemento de bloque (en lugar del predeterminado en línea). Esto obliga a los enlaces a ocupar todo el espacio de la LI y actuar como un párrafo, lo que facilita el estilo de los enlaces como botones de menú. Luego, elimine lo siguiente:
subrayado, decoración de texto: ninguno; como
Esto hace que los botones se parezcan más a botones. Tu diseño puede ser diferente.
ul # navigation li a {
bloqueo de pantalla;
decoración de texto: ninguna;
acolchado: .25em;
borde inferior: sólido 1px # 39f;
borde derecho: sólido 1px # 39f;
}
Con el bloqueo de pantalla; en los enlaces, se puede hacer clic en todo el cuadro del elemento del menú, no solo en las letras. Esto también es bueno para la usabilidad. Configure los colores del enlace (enlace, visitado, flotante y activo) si desea que los enlaces sean diferentes del azul, rojo y violeta predeterminados.
a: enlace, a: visitado {color: #fff; }
a: hover, a: active {color: # 000; }
También puede prestar un poco de atención al estado de desplazamiento cambiando el color de fondo.
a: hover {color de fondo: #fff; }
Menú de navegación horizontal
Crear menús de navegación horizontal es un poco más difícil que los menús de navegación vertical porque debe compensar el hecho de que las listas HTML prefieren mostrarse verticalmente. Al igual que con el menú horizontal, cree la lista del menú de navegación:
- Casa
- Productos
- Servicios
- Contáctenos
Para crear un menú horizontal, trabaje de la misma manera que lo hizo con el menú vertical. Empiece por el exterior y trabaje en el interior. Para iniciar la navegación en la esquina izquierda, configúrelo con 0 margen izquierdo y relleno, y colóquelo hacia la izquierda.
Adquiera el hábito de configurar el ancho para que su menú no ocupe más o menos espacio del que desea. Para los menús horizontales, este suele ser el ancho completo del diseño. También puede agregar un color de fondo a la lista para que sea más fácil de leer.
ul # navigation {
flotador izquierdo;
margen: 0;
acolchado: 0;
ancho: 100%;
color de fondo: # 039;
}
El secreto del menú de navegación horizontal está en los elementos de la lista. Los elementos de la lista son normalmente elementos de bloque, lo que significa que estos elementos tienen una nueva línea colocada antes y después de cada uno. Al cambiar la pantalla de bloque a en línea, fuerza a los elementos de la lista a alinearse horizontalmente uno al lado del otro.
ul # navegación li {display: inline; }
Trate los enlaces exactamente como el menú de navegación vertical, con los mismos colores y decoración de texto. Agregue un borde superior para delinear los botones cuando el usuario pasa el mouse sobre un botón. Entonces, quita bloqueo de pantalla; ya que vuelve a colocar las nuevas líneas y destruye el menú horizontal.
Estás aquí Información de ubicación
Otro aspecto de HTML es este identificador:
estás aquí
Si desea modificar su menú para indicar la ubicación actual de sus usuarios, use esta ID para definir un color de fondo diferente u otro estilo. Mueva ese ID de atributo al elemento de menú correcto en otras páginas para que la página actual siempre esté resaltada.
Si reúne estos estilos en su página, puede crear una barra de menú horizontal o vertical que funcione con su sitio y sea rápida de descargar y fácil de actualizar. El uso de XHTML + CSS convierte sus listas en una poderosa herramienta de diseño.
Si desea más ejemplos de menús horizontales, busque en la web los siguientes:
- Un menú horizontal con estilo
- Una plantilla de menú horizontal básica
- Un menú horizontal con estilo con You Are Here
- Una plantilla de menú horizontal básica con You Are Here