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

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.