Barra de navegación horizontal CSS
Barra de navegación horizontal
Hay dos formas de crear una barra de navegación horizontal. Uso de elementos de lista en línea o flotantes .
Elementos de la lista en línea
Una forma de construir una barra de navegación horizontal es especificar los elementos <li> como en línea, además del código "estándar" de la página anterior:
Ejemplo
li
{
display: inline;
}
Ejemplo explicado:
display: inline;- Por defecto, los elementos <li> son elementos de bloque. Aquí, eliminamos los saltos de línea antes y después de cada elemento de la lista para mostrarlos en una línea.
Elementos de la lista flotante
Otra forma de crear una barra de navegación horizontal es hacer flotar los elementos <li> y especificar un diseño para los enlaces de navegación:
Ejemplo
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
Ejemplo explicado:
float: left;- Usa flotar para hacer que los elementos de bloque floten uno al lado del otrodisplay: block;- Nos permite especificar relleno (y alto, ancho, márgenes, etc. si lo desea)padding: 8px;- Especifique algo de relleno entre cada elemento <a>, para que se vean bienbackground-color: #dddddd;- Agregue un color de fondo gris a cada elemento <a>
Sugerencia: agregue el color de fondo a <ul> en lugar de cada elemento <a> si desea un color de fondo de ancho completo:
Ejemplo
ul
{
background-color: #dddddd;
}
Ejemplos de barra de navegación horizontal
Cree una barra de navegación horizontal básica con un color de fondo oscuro y cambie el color de fondo de los enlaces cuando el usuario mueva el mouse sobre ellos:
Ejemplo
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
}
Enlace de navegación activo/actual
Agregue una clase "activa" al enlace actual para que el usuario sepa en qué página se encuentra:
Ejemplo
.active {
background-color: #04AA6D;
}
Enlaces alineados a la derecha
Alinee los enlaces a la derecha haciendo flotar los elementos de la lista a la derecha ( float:right;):
Ejemplo
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul>
Divisores de borde
Agregue la border-rightpropiedad a <li> para crear divisores de enlace:
Ejemplo
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Barra de navegación fija
Haga que la barra de navegación permanezca en la parte superior o inferior de la página, incluso cuando el usuario se desplace por la página:
parte superior fija
ul {
position: fixed;
top: 0;
width: 100%;
}
Fondo fijo
ul {
position: fixed;
bottom: 0;
width: 100%;
}
Nota: Es posible que la posición fija no funcione correctamente en dispositivos móviles.
Barra de navegación horizontal gris
Un ejemplo de una barra de navegación horizontal gris con un borde gris delgado:
Ejemplo
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Barra de navegación fija
Agregue position: sticky;a <ul> para crear una barra de navegación fija.
Un elemento fijo alterna entre relativo y fijo, dependiendo de la posición de desplazamiento. Se coloca en relación hasta que se alcanza una posición de desplazamiento determinada en la ventana gráfica; luego, se "pega" en su lugar (como posición: fija).
Ejemplo
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Nota: Internet Explorer no es compatible con el posicionamiento fijo. Safari requiere un prefijo -webkit- (ver el ejemplo anterior). También debe especificar al menos uno de , topo para que funcione el posicionamiento fijo.rightbottomleft
Más ejemplos
Topnav receptivo
Cómo usar consultas de medios CSS para crear una navegación superior receptiva.
Navegación lateral receptiva
Cómo usar consultas de medios CSS para crear una navegación lateral receptiva.
Barra de navegación desplegable
Cómo agregar un menú desplegable dentro de una barra de navegación.
¿Alguna vez has oído hablar de W3Schools Spaces ? Aquí puede crear su sitio web desde cero o utilizar una plantilla y alojarlo de forma gratuita.
Comience gratis ❯* No se requiere tarjeta de crédito