Menu horizontal con html y css

Navegación css horizontal

1) No puedo conseguir que se extienda por todo el ancho de la página. El menú en sí debe estirarse a lo largo de todo el ancho de la página, con el ancho de la página dividido en 6, y el texto en cada elemento del menú para ser centralizado y permanecer el mismo tamaño y sólo añadir fondo negro extra para acomodar el ancho de la página. (La mayoría de los usuarios que lo verán utilizarán 1920 x 1080 aparentemente)

3) ¿Cómo puedo hacer que al hacer clic en el menú principal se muestre el submenú correspondiente y se mantenga hasta que se haga clic en otra parte de la página (es decir, para que no tengas que mantener el ratón encima para seleccionar el submenú)?

Barra de navegación html desplegable

Lo más sencillo es forzar el salto de línea insertando un elemento al final de la línea que ocupe más del espacio disponible a la izquierda y ocultándolo. Esto lo he conseguido muy fácilmente con un simple elemento span como este:

Toda la basura dentro del selector span #menu es (por lo que he encontrado) necesaria para complacer a la mayoría de los navegadores. Debería forzar la anchura del elemento span al 100%, lo que debería provocar un salto de línea ya que se considera un elemento en línea debido a la regla display: inline-block. inline-block también hace que el span pueda someterse a reglas de estilo a nivel de bloque como width, lo que provoca que el elemento no se ajuste a la línea del menú y, por tanto, que el menú sufra un salto de línea.

En este caso, sólo hay que establecer el display del elemento padre a flex y luego cambiar la propiedad justify-content a space-between o space-around para añadir espacio entre o alrededor de los elementos flexbox hijos.

Pongo la barra de menú en un párrafo justificado. El problema es que la última línea de un párrafo justificado no se renderiza justificada, por razones obvias. Por lo tanto, añado un elemento invisible ancho (por ejemplo, un img) que garantiza que el párrafo tiene al menos dos líneas.

Menú html css

Esta es ya la tercera vez en una semana que voy a hablar del menú. Después de pasar por los menús móviles, la barra de navegación responsiva, la cabecera de navegación pegajosa, el menú circular con css puro y varios más, volvemos con el menú horizontal esta vez. ¿Por qué otra vez el menú? porque parece que no tenemos suficiente de él y tampoco tú con la búsqueda en el menú para cada ocasión que sigue y sigue. Por lo tanto, hemos traído un poco nuevo tema que cubre una serie de menús de respuesta especialmente barra de menú horizontal para la navegación con css puro. La barra de navegación horizontal es especial para un diseño de sitio web css eficiente, sin embargo, algunas aplicaciones pueden preferir esto sobre la vertical.

Ya hemos dicho un millón de veces que el menú es una parte integral de cualquier sitio web o aplicación, ya que son la guía para los usuarios dentro de ella. No sólo desde el punto de vista de la experiencia del usuario, sino también para una mejor puntuación de SEO que tiene que ser hecho con la perfección. Habiendo dicho que el menú es tan importante, ¿preferirías ir por un diseño separado para móvil, portátil con pantalla de 14 pulgadas, portátil con pantalla de 15 pulgadas, tabletas y mil opciones más? Sólo si estás loco para pensar de esa manera. Sólo tienes que comprobar los menús responsive css para tratar todos esos problemas.

Barra de navegación simple html css

Un elemento sticky alterna entre relativo y fijo, dependiendo de la posición de desplazamiento. Se posiciona de forma relativa hasta que se alcanza una determinada posición de desplazamiento en la ventana gráfica – entonces se «pega» en su lugar (como position:fixed).

Nota: Internet Explorer no admite el posicionamiento fijo. Safari requiere un prefijo -webkit- (véase el ejemplo anterior). También debe especificar al menos una de las posiciones superior, derecha, inferior o izquierda para que el posicionamiento fijo funcione.

W3Schools está optimizado para el aprendizaje y la formación. Los ejemplos pueden ser simplificados para mejorar la lectura y el aprendizaje. Los tutoriales, las referencias y los ejemplos se revisan constantemente para evitar errores, pero no podemos garantizar la total corrección de todo el contenido. Al utilizar W3Schools, usted acepta haber leído y aceptado nuestra