Ya sea que su menú de navegación sea una fila horizontal en la parte superior o una fila vertical en el lateral, sigue siendo solo una lista. Al diseñar la navegación web, a menudo es fácil olvidar que un menú de navegación es solo un grupo de enlaces glorificados. Pero si programa su navegación con XHTML + CSS, puede crear un menú que sea pequeño para descargar (el XHTML) y fácil de personalizar (el CSS).
Empezando
Para comenzar a diseñar una lista para la navegación, necesita usar una lista. Puede ser una lista desordenada estándar que se ha identificado como la navegación:
Si observa detenidamente el HTML, notará que el enlace "Inicio" también tiene una ID de
estás aquí. Esto le permitirá crear un menú que identifique la ubicación actual de 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 decides agregar la referencia más adelante, tendrás menos codificación para preparar tu sitio.
Sin ningún estilo CSS, este menú XHTML parece una lista desordenada estándar. Hay balas y los elementos de la lista están ligeramente sangrados. Debido a que estoy usando enlaces de marcadores de posición, la mayoría de los navegadores no los mostrarán como clics (subrayados y en azul). Si pega el HTML anterior en una página web, su navegación se verá así:
- Casa
- Productos
- Servicios
- Contáctenos
Esto es bastante aburrido y no se parece mucho a un menú. Pero con solo unos pocos estilos CSS agregados a la lista, puede crear un menú que lo enorgullece.
Menú de navegación vertical
Un menú de navegación vertical es muy 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 en la página.
Cuando estoy diseñando menús, me gusta comenzar por fuera y trabajar. Con esto, quiero decir que primero estilo el
navegación # ul y luego pasar a la
li elementos y luego los enlaces, etc. Entonces, para este menú, primero debe definir el ancho del menú. Esto asegurará que incluso si los elementos del menú son largos, no empujarán el resto del diseño ni causarán el desplazamiento horizontal.
ul # navigation {width: 12em; }
Una vez que tengo el ancho establecido, puedo jugar con los elementos de la lista. Esto me permite configurar cosas como (deshacerse de las viñetas), colores de fondo, bordes, alineación del 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;} Una vez que haya establecido los conceptos básicos para los elementos de la lista, puede comenzar a jugar con el aspecto del menú en el área de enlaces. Primer estilo el UL # navegación LI Ay luego el Un enlace, A: visitó, A: flotary A: activo (si los quieres). Para los enlaces, me gusta hacer de los enlaces un elemento de bloque (en lugar de la línea predeterminada). Esto les obliga a ocupar todo el espacio de la Yo-Y actúan más como un párrafo, lo que facilita su estilo como botones de menú. La otra cosa que siempre hago es eliminar el subrayado ( texto-decoración: ninguno;), ya que esto hace que los botones se vean más como botones para mí. Pero por supuesto, su diseño puede ser diferente. ul # navigation li a {bloqueo de pantalla;texto-decoración: ninguno;relleno: .25em;borde inferior: sólido 1px # 39f;borde derecho: sólido 1px # 39f;} Tenga en cuenta que con el bloqueo de pantalla; En los enlaces, se puede hacer clic en el cuadro completo del elemento del menú, no solo en las letras. Esto también es bueno para la usabilidad. Asegúrese de establecer los colores del enlace (enlace, visitado, desplazamiento y activo) si desea que sean diferentes de los colores azul, rojo y púrpura predeterminados. a: enlace, a: visitó {color: #fff; }a: hover, a: active {color: # 000; } También me gusta prestar más atención al estado de desplazamiento al cambiar el color de fondo. a: hover {background-color: #fff; } Si desea más ejemplos de menús verticales, consulte la lista a continuación. Crear menús de navegación horizontal es un poco más difícil que los menús de navegación vertical porque tiene que compensar el hecho de que las listas HTML prefieren mostrarse verticalmente. Al igual que con el menú horizontal, primero cree su lista de menú de navegación:
Para crear un menú horizontal, trabaja igual que hiciste con el menú vertical. Comience con el exterior y trabaje. Como quiero que mi navegación comience en la esquina izquierda, la configuro con 0 margen izquierdo y relleno, y la hago flotar hacia la izquierda. También debe acostumbrarse a establecer el ancho para que su menú no ocupe más o menos espacio del que desea. Para menús horizontales, este suele ser el ancho completo del diseño. También agregué un color de fondo a toda la lista para que sea más fácil de leer. ul # navigation {flotador izquierdo;margen: 0;relleno: 0;ancho: 100%;color de fondo: # 039;} Pero el secreto del menú de navegación horizontal está en los elementos de la lista. Los elementos de la lista normalmente son elementos de bloque, lo que significa que tendrán una nueva línea colocada antes y después de cada uno. Cambiando la pantalla de bloquear a en línea, obliga a los elementos de la lista a alinearse uno al lado del otro horizontalmente. ul # navigation li {display: inline; } Traté los enlaces exactamente como los traté en el menú de navegación vertical, con los mismos colores y la misma decoración de texto. Agregué un borde superior para delinear los botones cuando se desplazan sobre ellos. Lo único que se quitó fue el bloqueo de pantalla; ya que volverá a poner las líneas nuevas y destruirá el menú horizontal. ul # navigation li a {texto-decoración: ninguno;relleno: .25em 1em;borde inferior: sólido 1px # 39f;borde superior: sólido 1px # 39f;borde derecho: sólido 1px # 39f;}a: enlace, a: visitó {color: #fff; }ul # navigation li a: hover {color de fondo: #fff;color: # 000;} Otro aspecto de HTML es el identificador. estás aquí. Si desea modificar su menú para indicar la ubicación actual de sus usuarios, simplemente use este CARNÉ DE IDENTIDAD Para definir un color de fondo diferente u otro estilo. Mueve ese atributo CARNÉ DE IDENTIDAD al elemento de menú correcto en otras páginas para que la página actual siempre esté resaltada. ul # navigation li # youherehere a {background-color: # 09f; } Si reúne estos estilos en su página, puede crear una barra de menú horizontal o vertical que funcione con su sitio, pero que sea rápida de descargar y muy fácil de actualizar en el futuro. El uso de XHTML + CSS convierte sus listas en una herramienta muy poderosa para el diseño. Si desea más ejemplos de menús horizontales, consulte lo siguiente.
Menú de navegación horizontal
Usted está aquí información de ubicación
