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

I changed you codepen with the following code that basically hides the scrollbar by forcing the wrapper height and hiding its overflow.

.tab-nav-wrapper{
  /* forced the wrapper height and set overflow to hidden to hide the ul scrollbar */
  height: 47px;
  overflow: hidden;
}

.tab-nav-wrapper > ul{
  /* padding: 0 !important; */
  overflow-x: auto;
  white-space: nowrap;
  /* this padding will place the scrollbar inside the hidden overflow */
  padding: 0 0 20px;
}

If you don't mind forcing the menu height, this should do it.

http://codepen.io/anon/pen/wGaKrB

Edit: Keep in mind that in order to be able to scroll through this menu you need a device capable of scrolling horizontally (such a touch device or a trackpad)

Answer 2

A simple solution:

give the .tab-nav-wrapper a fixed height which should be the height of the li items (navigation items) and hide elements that overflow (here we want to hide the scrollbar):

.tab-nav-wrapper {
  overflow: hidden; // magic is here
  height: 48px; // magic is here
}

Then make the ul scrollable (only x direction) and prevent the li elements from breaking to a new line:

.tab-nav-wrapper > ul {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  z-index: 100;
  background-color: #ccc;
  white-space: nowrap; // magic is here
  overflow-x: scroll; // magic is here
}

That's all :). No javascript required to make it work: http://codepen.io/anon/pen/RarPxp

Answer 3

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;

<link href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>

<p class="info">Grab and drag tabs for scroll</p>

<ul class="tabs">
  <li class="item"><a data-target="tab-one">Tab One</a></li>
  <li class="item"><a data-target="tab-two">Tab Two</a></li>
  <li class="item"><a data-target="tab-three">Tab Three</a></li>
  <li class="item"><a data-target="tab-four">Tab Four</a></li>
  <li class="item"><a data-target="tab-five">Tab Five</a></li>
  <li class="item"><a data-target="tab-six">Tab Six</a></li>
  <li class="item"><a data-target="tab-seven">Tab Seven</a></li>
  <li class="item"><a data-target="tab-eight">Tab Eight</a></li>
</ul>

<div class="tab-content">
  <div class="tab tab-one active">One <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, iusto!</div>
  <div class="tab tab-two">Two <br> Lorem ipsum dolor sit amet, consectetur</div>
  <div class="tab tab-three">Three</div>
  <div class="tab tab-four">Four</div>
  <div class="tab tab-five">Five</div>
  <div class="tab tab-six">Six</div>
  <div class="tab tab-seven">Seven</div>
  <div class="tab tab-eight">Eight</div>
</div>

Answer 4

To make the content in an element scrollable, first we need to add overflow: scroll or overflow: auto to the element. (See the difference here.)

.tab-nav-wrapper {
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
  overflow: scroll; /* add */
}

Then we need to let the content take up as much space as it wants. Remove width: 100% to allow that. Also, add white-space: nowrap to keep the contents from breaking onto multiple lines.

.tab-nav-wrapper > ul {
  padding: 0 !important;
  margin: 0 !important;
  /* width: 100%; */ /* remove */
  white-space: nowrap; /* add */
  display: inline-block;
  z-index: 100;
  background-color: #ccc;
}

Finally, if you don't want the scrollbar to show (on the .tab-nav-wrapperelement), you can hide it like this.

.tab-nav-wrapper::-webkit-scrollbar { 
  display: none; 
}

Lastly, move the background from tab-nav-wrapper > ul to tab-nav-wrapper. This is because the ul doesn't underlay all of it's contents, but the wrapper does.

.tab-nav-wrapper > ul {
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap;
  z-index: 100;
  /* background-color: #ccc; */ /* move */
}

.tab-nav-wrapper {
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
  overflow: scroll;
  background-color: #ccc; /* move to here */
}

Fiddle: http://codepen.io/anon/pen/VaeLje

NB: There is an issue with scrolling in this codepen example. Mouse wheel scroll does not work, but you can scroll by dragging if you're viewing it on a device, or in development mode + device mode in your browser.