Horizontal Tab based menu with scrolling tabs

Question

I have a simple Horizontal Menu more like tabs.. I want it to work like a BBC app tab menu, So that when menu has more items it will allow horizontal scrolling in both directio

Answer 1

You can do this with Owl Carousel 2. As you can see you can horizontally scroll tabs with mouse drag and there is no horizontal scroll bar. Also I used the responsive option to adjust number of showing tabs on different widths but you can modify that. Here is a Fiddle and another Fiddle with arrows.

//OWL Carousel
$('.tabs').owlCarousel({
    loop: true,
    nav: false,
    dots: false,
    responsive: {
      0:   {items: 2},
      250: {items: 3},
      400: {items: 4},
      500: {items: 5}
    }
});

//Tabs
$('.tabs li a').click(function() {
  var activeLink = $(this).data('target');
  var targetTab = $('.tab.'+activeLink);
  
  targetTab.siblings().removeClass('active');
  targetTab.addClass('active');
});

body {
  background: white;
}

a {
  color: white;
  text-decoration: none;
  font-size: 12px;
  text-transform: uppercase;
}

ul {
  list-style-type: none;
  max-width: 500px;
  margin: 2px auto;
  background: #353434;
  padding: 0;
}

.tab-content {
  max-width: 500px;
  border: 1px solid black;
  margin: 0 auto;
}

.owl-controls {
  display: none;
}

li {
  display: inline-block;
  padding: 10px 20px;
  white-space: nowrap;
  transition: all 0.3s ease-in;
  border-bottom: 4px solid transparent;
}

li:hover {
  border-bottom: 4px solid white;
  opacity: 0.7;
  cursor: pointer;
}

.tab-content > div {
  display: none;
}

.tab-content > div.active {
  display: block;
}

.info {
  text-align: center;

Grab and drag tabs for scroll


  
Tab One
  
Tab Two
  
Tab Three
  
Tab Four
  
Tab Five
  
Tab Six
  
Tab Seven
  
Tab Eight



  
One 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, iusto!
  
Two 
 Lorem ipsum dolor sit amet, consectetur
  
Three
  
Four
  
Five
  
Six
  
Seven
  
Eight