Responsive menu using overflow-x

Using jQuery Ref https://stackoverflow.com/a/45153845 https://stackoverflow.com/a/24324689

by Roberto Apasajja

HTML

<div id="menu">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
  </ul>
  <div id="nav">
    <div id="prev">Prev</div>
    <div id="next">Next</div>
  </div>
</div>

CSS

#menu {
  position: relative;
  background: grey;
  padding: 0 50px;
}

ul {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  list-style: none;
  padding: 0;
}

li {
  width: 80px;
  height: 50px;
  display: inline-block;
  text-align: center;
}

li:nth-child(odd) {
  background-color: green;
}

li:nth-child(even) {
  background-color: blue;
}

#nav {
  position: absolute;
  top: 0;
  width: 300px;
}

#prev {
  display: inline-block;
  position: absolute;
  left: -50px;
  background-color: #ceaaaa;
  padding: 5px;
  cursor: pointer;
  top: 10px;
  font-weight: bold;
}

#next {
  position: absolute;
  right: -50px;
  display: inline-block;
  background-color: #ceaaaa;
  padding: 5px;
  cursor: pointer;
  top: 10px;
  font-weight: bold;
}

JavaScript

if ($("#menu ul").prop('scrollWidth') > $("#menu ul").width() ) {

    $('#prev').on('click', function() {
      $('#menu ul').animate({
        scrollLeft: '-=100'
      }, 300, 'swing');
    });

    $('#next').on('click', function() {
      $('#menu ul').animate({
        scrollLeft: '+=100'
      }, 300, 'swing');
    });

}
else {
		$('#nav').css({
      'display' : 'none'
    });
    $('#menu').css({
      'padding' : '0'
    });
}