Cómo crear: menú deslizante horizontal

Aprende a crear un menú deslizante horizontal con CSS.

Inicio Noticias Contacto Acerca de Soporte Blog Herramientas Base Personalizado Más Logo Amigos Socios Personas Trabajo

Prueba por tu cuenta

Cómo crear un menú deslizante horizontal

Primer paso - Añadir HTML:

<div class="scrollmenu">
  <a href="#home">Inicio</a>
  <a href="#news">Noticias</a>
  <a href="#contact">Contacto</a>
  <a href="#about">Acerca de</a>
  ...
</div>

Segundo paso - Añadir CSS:

La técnica para hacer que la barra de navegación sea desplazable es usar overflow:auto y white-space:nowrap:

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;
}

Prueba por tu cuenta

Páginas relacionadas

Tutoriales:Barra de navegación CSS