Como fazer - Menu de rolagem horizontal
Aprenda a criar um menu rolável horizontal com CSS.
Casa
Notícias
Contato
Cerca de
Apoio, suporte
Blogue
Ferramentas
Base
Personalizado
Mais
Logotipo
Amigos
Parceiros
Pessoas
Trabalhos
Como criar um menu rolável horizontal
Etapa 1) Adicionar HTML:
Exemplo
<div class="scrollmenu">
<a href="#home">Home</a>
<a
href="#news">News</a>
<a href="#contact">Contact</a>
<a
href="#about">About</a>
...
</div>
Etapa 2) Adicionar CSS:
O truque para tornar a barra de navegação rolável é usando overflow:auto
and white-space: nowrap
:
Exemplo
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;
}
Dica: Acesse nosso Tutorial CSS Navbar para saber mais sobre as barras de navegação.