Como hacer un menu horizontal con css

Inicio » Como hacer un menu horizontal con css

Ejemplos de Navbar css

Lo más sencillo es forzar la ruptura de la línea insertando un elemento al final de la línea que ocupe más del espacio disponible a la izquierda y luego 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 la visualización 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.

Html barra de navegación horizontal

Consulte los comentarios en el código para obtener explicaciones. A surprisingly small amount of css, really. The dropdowns are normally hidden, and appear when the parent <li> is hovered. So this gives us (same as at the top of the page):

You’ll see that the use of absolute positioning makes the dropdown appear on top of anything else on the page – which is what we want. And this works fine in pretty much every browser in popular use today. Specifically I’ve tested in IE7, IE8, FF3, Chrome, Opera9, Opera 10, Safari4. You’ll spot there’s something missing. No prizes for guessing what browser causes a little extra difficulty…

IE6 doesn’t support :hover, except on <a> elements. So without a bit of extra code, our nice dropdown won’t work at all in IE6. Fortunately, there’s a solution called csshover, which you’ll find here along with instructions on how to use it. I’ve personally found version 2 of this software to be the most reliable.

Navegación css horizontal

Los menús horizontales son una excelente manera de crear un menú de categorías o páginas, destacando áreas específicas de interés dentro de su sitio web. Muchos diseñadores web colocan un menú horizontal bajo la cabecera, donde llaman la atención.

Los menús horizontales se crean con la función de lista de HTML. Sí, aunque son horizontales en lugar de verticales, como las típicas listas, siguen siendo una lista. Los estilos de presentación CSS nos permiten configurar la lista para que se ejecute en una línea en lugar de una línea separada para cada elemento de la lista.

A continuación se muestra la lista simple para nuestro menú horizontal. Te recomendamos que mantengas tu lista pequeña, ya que demasiada se extenderá a lo largo de la pantalla y puede causar algunos problemas de diseño. Hemos encerrado la lista en una división llamada navmenu.

Por defecto, una lista se ejecuta verticalmente, cada elemento en su propia línea. También incluye una imagen, conocida como bala, antes de cada línea. En su hoja de estilos, tenemos que añadir una referencia al navmenu y el primer paso es eliminar la bala y establecer nuestros márgenes y el relleno a cero para toda la lista.

Menú desplegable css

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ú)?

Ir arriba