W3.CSS proporcionar todo tipo de barras de navegación:
Vertical:
Horizontal (vertical en pantallas pequeñas):
Navegación básica
La clase W3-crea una barra de navegación barra de navegación horizontal:
Ejemplo
<ul class="w3-navbar w3-black">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> Inténtalo tú mismo " Barra de exploración de color
Ejemplo
<ul class="w3-navbar w3-light-grey">
<ul
class="w3-navbar w3-green">
<ul
class="w3-navbar w3-blue"> Inténtalo tú mismo " Bares con borde de navegación
Ejemplo
<ul class="w3-navbar w3-border w3-light-grey">
<ul
class="w3-navbar w3-border w3-round w3-light-grey">
<ul
class="w3-navbar w3-card-8 w3-light-grey"> Inténtalo tú mismo " Activo / Enlace actual
Ejemplo
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-green" href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> Inténtalo tú mismo " Enlaces Hoverable
Al pasar el ratón sobre los enlaces dentro de la barra de navegación, el color de fondo cambiará a gris.
Si desea un color de fondo diferente en vuelo estacionario, utilice cualquiera de las clases de color W3-hover-, y si quieres un color de texto diferente en vuelo estacionario, utilice cualquiera de las clases w3-libración de conversión de texto a color:
Ejemplo
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-hover-red" href="#">Home</a></li>
<li><a class="w3-hover-blue" href="#">Link 1</a></li>
<li><a
class="w3-hover-green" href="#">Link 2</a></li>
<li><a class="w3-hover-teal" href="#">Link 3</a></li>
</ul> Inténtalo tú mismo " Enlaces Alineados derecha
Ejemplo
<ul class="w3-navbar w3-light-grey w3-border">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li
class="w3-right"><a class="w3-green" href="#">Link
3</a></li>
</ul> Inténtalo tú mismo " Barra de navegación Tamaño
Cambiar el tamaño de la fuente:
Ejemplo
<ul class="w3-navbar w3-green w3-large">
<ul class="w3-navbar w3-green
w3-xlarge"> Inténtalo tú mismo " Cambiar el relleno:
Ejemplo
<ul class="w3-navbar w3-green">
<li><a class="w3-padding-hor-16" href="#">Home</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 1</a></li>
<li><a
class="w3-padding-hor-16" href="#">Link 2</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 3</a></li>
</ul> Inténtalo tú mismo " Personalizar la anchura de los elementos de la lista con la propiedad width CSS (Nota: en las pantallas más pequeñas, transformarán a 100%):
Ejemplo
<ul class="w3-navbar w3-dark-grey w3-center">
<li
style="width:50%"><a class="w3-padding w3-green" href="#">Home</a></li>
<li style="width:50%"><a class="w3-padding" href="#">Link 1</a></li>
</ul> Inténtalo tú mismo " Barra de navegación con iconos
Ejemplo
<ul class="w3-navbar w3-light-grey w3-border
w3-large">
<li><a
class="w3-green" href="#"><i class="fa fa-home w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-search w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-envelope w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-globe w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-sign-in w3-large"></i></a></li>
</ul> Inténtalo tú mismo " Barra de navegación con desplegable
Mover el puntero del ratón sobre el enlace "desplegable":
Ejemplo
<ul class="w3-navbar w3-card-2 w3-light-grey">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li class="w3-dropdown-hover">
<a href="#">Dropdown</a>
<div
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul> Inténtalo tú mismo " Nota: Cuando el menú desplegable está "abierto", el enlace desplegable consigue un color de fondo gris para indicar que está activo. Para anular este, añadir un color clase W3-hover- tanto a la "desplegable" <li> y <a>:
Consejo: Si desea un símbolo desplegable junto al texto desplegable, añadir un icono adecuado (como ):
Ejemplo
<li class="w3-dropdown-hover
w3-hover-orange">
<a class="w3-hover-orange" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li> Inténtalo tú mismo " Utilice w3-desplegable clic si usted prefiere hacer clic en el enlace desplegable en lugar de flotar:
Ejemplo
<li class="w3-dropdown-click">
<a onclick="myFunction()" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div id="demo"
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li> Inténtalo tú mismo " Fijo barra de navegación
Para forzar la barra de navegación para permanecer en la parte superior o en la parte inferior de la página, incluso cuando el usuario se desplaza a la página, envuelven un elemento <div> alrededor del <ul> y agregue la W3-top o una clase de w3-bottom:
El colapso de la barra de navegación
Cuando la barra de navegación ocupa demasiado espacio en una pantalla pequeña, y usted no quiere mostrarlo verticalmente de forma predeterminada, puede utilizar clases de utilidad para ocultar y mostrar enlaces específicos en la barra de navegación.
En el siguiente ejemplo, la barra de navegación se sustituye con un botón (☰) en la esquina superior derecha cuando se muestra en las tabletas y dispositivos móviles. Cuando se hace clic en el botón, la barra de navegación se mostrará verticalmente:
Ejemplo
Inténtalo tú mismo "topnav
Otro ejemplo de una barra de navegación, es la clase W3-topnav. Es similar a W3-barra de navegación, excepto que se sumará un subrayado cuando se pasa sobre los enlaces, en lugar de un color de fondo:
Ejemplo
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Inténtalo tú mismo " Ejemplo de fuente con iconos impresionantes
<nav class="w3-topnav w3-green">
<a href="#"><i class="fa
fa-home"></i></a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Inténtalo tú mismo " navegación de la parte
La clase W3-sidenav crea una barra de navegación vertical:
Ir al siguiente capítulo para obtener más información acerca de la navegación lateral.