Horizontal sliding menu

Question

I’m setting up an E-commerce where the main menu contains all the main product categories. When Admin registers many categories the menu is broken into two lines.

The customer asked you to keep all categories in one line and, if you exceed the full line size, create a sliding menu (such as a carousel).

I couldn’t find any example working from a menu built this way, I tried using Jquery OWL and kept breaking the same way.

Follow an example from the 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 &amp; Conexões </a></li>
      <li><a href="#">Cartuchos &amp; 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>

Does anyone know any way to create this sliding menu?

Answer 1

Follow an option based on this example

I kept the most of your HTML code, to make it easier to understand things. However, in CSS it was necessary to adjust some things and use display flex to facilitate and pure JS.

var scroller = document.querySelector('.gallery-row-scroll');
var leftArrow = document.getElementById('leftArrow');

var direction = 0;
var active = false;
var max = 10;
var Vx = 0;
var x = 0.0;
var prevTime = 0;
var f = 0.2;
var prevScroll = 0;

function physics(time) {
  // Measure how much time has passed
  var diffTime = time - prevTime;
  if (!active) {
    diffTime = 80;
    active = true;
  }
  prevTime = time;

  // Give power to the scrolling


  Vx = (direction * max * f + Vx * (1-f)) * (diffTime / 20);

  x += Vx;
  var thisScroll = scroller.scrollLeft;
  var nextScroll = Math.floor(thisScroll + Vx);

  if (Math.abs(Vx) > 0.5 && nextScroll !== prevScroll) {
    scroller.scrollLeft = nextScroll;
    requestAnimationFrame(physics);
  } else {
    Vx = 0;
    active = false;
  }
  prevScroll = nextScroll;
}

leftArrow.addEventListener('mousedown', function () {
  direction = -1;
  if (!active) {
    requestAnimationFrame(physics);
  }
});

leftArrow.addEventListener('mouseup', function () {
  direction = 0;
});

rightArrow.addEventListener('mousedown', function () {
  direction = 1;
  if (!active) {
    requestAnimationFrame(physics);
  }
});
rightArrow.addEventListener('mouseup', function(event){
  direction = 0;
});

.cabecalho{
  width: 100%;
  background-color: #a01127;
  font-size: 3rem;
  color: white;
  text-align: center;
  padding: .5rem 0;
}

.menu{
  width: 100%;
  background-color: #a01127;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.menu ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li{
  display: inline;
  padding: 0 .7rem;
}

.menu a{
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
}


.gallery-row{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  display:-webkit-flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
      -ms-flex-flow:row nowrap;
          flex-flow:row nowrap;
}

.gallery-row-scroll{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  display:-webkit-flex;
  /* overflow-x:scroll; */
  -webkit-overflow-scrolling: touch;
  -ms-flex-flow: row nowrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-flow: row nowrap;

  overflow: hidden;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

}

.gallery-row-scroll > *{
  margin: 0 0.1em;
  -webkit-flex:0 0 auto;
}

.gallery-row-scroll > :first-child{
  margin-left: 0;
}

.gallery-row-scroll > :last-child{
  margin-right: 0;
}

.gallery-row img{
  display:block;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;
}

.gallery-row .arrow.right{
  right:0;
}

.gallery-row.large img{
  height:200px;
  width:auto;
}

.gallery-row.small img{
  height:150px;
  width:auto;
}

.arrow {
  display: inline-block;
  padding: 1rem;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

<div>
  <div class="cabecalho"><span>Cabeçalho</span></div>
  <div id="widthControlled" class="gallery-row small menu">
    <div id="leftArrow" class="arrow left" >
      <
    </div>
    <ul id="scroller" class="gallery-row-scroll">
      <li><a href="#">Acessórios</a></li>
      <li><a href="#">Automação</a></li>
      <li><a href="#">Cabos &amp; Conexões </a></li>
      <li><a href="#">Cartuchos &amp; 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 id="rightArrow" class="arrow right">
      >
    </div>
  </div>
</div>

Another model but using jQuery: https://codepen.io/suriyag/pen/gbpaxG