Cómo - Menú de desplazamiento horizontal
Aprende a crear un menú desplazable horizontal con CSS.
Casa
Noticias
Contacto
Acerca de
Apoyo
Blog
Instrumentos
Base
Personalizado
Más
Logo
Amigos
Socios
Personas
Trabajo
Cómo crear un menú desplazable horizontal
Paso 1) Agregar HTML:
Ejemplo
<div class="scrollmenu">
<a href="#home">Home</a>
<a
href="#news">News</a>
<a href="#contact">Contact</a>
<a
href="#about">About</a>
...
</div>
Paso 2) Agregar CSS:
El truco para hacer desplazable la barra de navegación es usar overflow:auto
y white-space: nowrap
:
Ejemplo
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
Sugerencia: vaya a nuestro Tutorial de barra de navegación CSS para obtener más información sobre las barras de navegación.