Estou ajustando um E-commerce no qual o menu principal contém todas as categorias principais de produtos. Quando o Admin cadastra muitas categorias o menu fica quebrado em duas linhas.
O cliente pediu para que mantenha todas as categorias em uma linha só e, caso ultrapasse o tamanho total da linha, crie um menu deslisante (como um carrosel).
Não consegui achar nenhum exemplo funcionando de um menu construído dessa forma, tentei usar o JQuery OWL e continuou quebrando da mesma forma.
Segue um exemplo do menu:
.cabecalho{
width: 100%;
background-color: #a01127;
font-size: 3rem;
color: white;
text-align: center;
padding: .5rem 0;
}
.menu{
width: 100%;
background-color: #a01127;
}
.menu ul{
list-style: none;
margin: 0;
}
.menu li{
display: inline;
padding: 0 .7rem;
}
.menu a{
color: white;
text-decoration: none;
font-size: 1.2rem;
}
<div>
<div class="cabecalho"><span>Cabeçalho</span></div>
<div class="menu">
<ul>
<li><a href="#">Acessórios</a></li>
<li><a href="#">Automação</a></li>
<li><a href="#">Cabos & Conexões </a></li>
<li><a href="#">Cartuchos & Toners</a></li>
<li><a href="#">Computador</a></li>
<li><a href="#">Energia </a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Hardware</a></li>
<li><a href="#">Impressoras</a></li>
<li><a href="#">Monitor</a></li>
<li><a href="#">Monitoramento</a></li>
<li><a href="#">Notebook</a></li>
<li><a href="#">Periféricos</a></li>
<li><a href="#">Rede</a></li>
</ul>
</div>
</div>
Alguém conhece alguma forma de criar esse menu deslisante?