Cómo crear: navegación en forma de píldora
- Página anterior Barra social pegajosa
- Página siguiente Encabezado de página responsivo
Aprende cómo usar CSS para crear menús de navegación en forma de píldora.
Navegación en forma de píldora
Crear navegación en forma de píldora
Primer paso - Añadir HTML:
<div class="pill-nav"> <a class="active" href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div>
Segundo paso - Añadir CSS:
/* Establecer el estilo de los enlaces en el menú de navegación en forma de píldora */ .pill-nav a { display: inline-block; color: black; text-align: center; padding: 14px; text-decoration: none; font-size: 17px; border-radius: 5px; } /* Cambiar el color del enlace al pasar el ratón */ .pill-nav a:hover { background-color: #ddd; color: black; } /* Añadir color al enlace activo/actual */ .pill-nav a.active { background-color: dodgerblue; color: white; }
Navegación en forma de píldora vertical
Añadir display: block a los enlaces, se mostrarán verticalmente en lugar de horizontalmente:
Páginas relacionadas
Tutoriales:Barra de navegación CSS
- Página anterior Barra social pegajosa
- Página siguiente Encabezado de página responsivo