Barras de navegación W3.CSS

Clases de barra de navegación W3.CSS

W3.CSS proporciona las siguientes clases para las barras de navegación:

Navegación básica

La clase w3-bar es un contenedor para mostrar elementos HTML horizontalmente.

La clase w3-bar-item define los elementos del contenedor.

Es una herramienta perfecta para crear barras de navegación:

Navegación receptiva

La clase w3-mobile hace que los elementos de la barra respondan (horizontal en pantallas grandes y vertical en pantallas pequeñas).

Barras de navegación de colores

Use una clase w3-color para agregar un color a la barra de navegación:

Barras de navegación bordeadas

Use una clase w3-border o w3-card para agregar bordes alrededor de la barra de navegación o para mostrarla como una tarjeta:

Enlace activo/actual

Agregue una clase de color w3 a un enlace para resaltarlo:

Enlaces flotantes

Cuando pasa el mouse sobre un botón, el color de fondo cambiará a gris.

Si desea un color de fondo diferente al pasar el mouse, use cualquiera de las clases w3-hover- color :

Si desea cambiar el color del texto, desactive el efecto de desplazamiento predeterminado con la clase w3-hover-none y agregue una clase w3-hover-text .

Dedique algo de tiempo a jugar con diferentes efectos de desplazamiento:

Enlaces alineados a la derecha

Use la clase w3-right en un elemento de la lista para alinear a la derecha un enlace específico:

Tamaño de la barra de navegación

Use una clase de tamaño w3 para cambiar el tamaño de fuente de los enlaces dentro de la barra de navegación:

Use una clase de relleno w3 para cambiar el relleno de cada enlace dentro de la barra de navegación:

Nota: También puede agregar relleno a la barra de navegación, en lugar de cada botón. Sin embargo, si hace esto, tenga en cuenta que los enlaces no obtienen un relleno completo al pasar el mouse:

Personaliza el ancho de los enlaces con la propiedad de ancho CSS

( Nota : use w3-mobile para transformar los enlaces al 100% de ancho en pantallas pequeñas):

Barra de navegación con iconos

Texto de la barra de navegación

Si desea texto en lugar de botones dentro de la barra de navegación, use la clase w3-bar-item para obtener el mismo relleno que los botones.

Barra de navegación con entradas y botones

Barra de navegación con menú desplegable

Mueva el mouse sobre el enlace "Desplegable":

Menú desplegable en el que se puede hacer clic

Use w3-dropdown-click si prefiere hacer clic en el enlace desplegable en lugar de pasar el mouse:

Menú desplegable horizontal

Elimine la clase w3-bar-block del contenedor desplegable si desea que los enlaces desplegables se muestren horizontalmente en lugar de verticalmente:

Barra de navegación receptiva con menú desplegable receptivo

Use la clase w3-mobile en todos los enlaces, incluido el contenedor desplegable, para crear una barra de navegación receptiva con enlaces desplegables receptivos.

Cambie el tamaño de la ventana del navegador para ver el efecto:

Fixed Navigation Bar

To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the bar and add the w3-top or w3-bottom class:

Vertical Navigation Bar

The w3-bar-block class is a container for displaying HTML elements vertically.

Collapsing the Navigation Bar

When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you can use hide and show classes on specific links in the navigation bar.

In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the links in the navigation bar will vertically stack:

Side Navigation

The w3-sidebar class creates a side navigation:

Go to the next chapter to learn more about the side navigation.