Día 69: CSS Horizontal Navbar
La ruta del desarrollador web frontend autónomo🤹♂️
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 lista en línea
Una forma de construir una barra de navegación horizontal es especificar los elementos <li> en línea, además del código "estándar" de la página anterior:
Ejemplo:
Ejemplo explicado:
display: inline;- De forma predeterminada, 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 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:
Ejemplo explicado:
float: left;- Usefloatpara hacer que los elementos de bloque floten uno al lado del otro.display: 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 bien.background-color: #dddddd;- Agregue un color de fondo gris a cada elemento<a>.
Nota: Agregue el color de fondo a <ul> en lugar de cada elemento <a> si desea un color de fondo de ancho completo:
Ejemplo:
Ejemplos - 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:
Enlace de navegación active/current
Agregue una clase active al enlace actual para que el usuario sepa en qué página se encuentra:
Ejemplo:
Enlaces alineados a la derecha
Alinee los enlaces a la derecha haciendo flotar los elementos de la lista a la derecha (float:right;):
Ejemplo:
Divisores de borde
Agregue la propiedad border-right a <li> para crear divisores de enlace:
Ejemplo:
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:
Ejemplo:
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:
Barra de navegación fija
Añadir position: fixed; 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 position: fixed).
Ejemplo:
Nota: Internet Explorer no es compatible con position: fixed;. Safari requiere un prefijo -webkit- (ver el ejemplo anterior). También debe especificar al menos top, right, bottom o left para que funcione el posicionamiento fijo.
Más ejemplos
Responsive Topnav
Cómo usar media queries CSS para crear una navegación superior responsiva.
Ejemplo:
Responsive Sidenav
Cómo usar media queries para crear una navegación lateral responsive.
Ejemplo:
Dropdown Navbar
Cómo agregar un menú desplegable dentro de una barra de navegación.
Ejemplo:
Resumen
Este tutorial de CSS muestra cómo crear una barra de navegación horizontal usando elementos de lista en línea o flotantes. También incluye ejemplos de cómo agregar un enlace de navegación activo, enlaces alineados a la derecha, divisores de borde y una barra de navegación fija. Además, hay ejemplos de navegación responsiva y un menú desplegable.
Traducido con 💚 desde W3Schools.com