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 directions.

Same of my code is here http://codepen.io/anon/pen/GZRaee

I tried it few thing but nothing seems to work Like i wrapped the menu in div with fixed width and tried to make it scroll-able but that didn't work as it always adds scroll-bar. I tried to make it carousel which didn't work for me either.

Is there any similar plug for HTML based website. Nav bar used by BBC app is quite common in app, I wish i can have something similar for HTML based webpage for mobile version.

<div class="tab-nav-wrapper">
  <ul>
    <li class="one"><a href="#">MenuONE</a></li>
    <li class="two"><a href="#">MTWO</a></li>
    <li class="three"><a href="#">THREE</a></li>
    <li class="four"><a href="#">FOUR</a></li>
    <li class="five"><a href="#">MenuFIVE</a></li>
    <hr />
  </ul>
</div>
<div class="tab-content-wrapper">
  <div class="tab1-c">
    <p>This is ONE.</p>
  </div>
  <div class="tab2-c">
    <p>This is TWO</p>
  </div>
  <div class="tab3-c">
    <p>This is THREE</p>
  </div>
  <div class="tab4-c">
    <p>This is FOUR</p>
  </div>

  <div>

Is this what you are looking for? http://codepen.io/anon/pen/EKjjQg, I just added white-space: nowrap; overflow-x: auto; to the ul style — Dax, Mar 02 '16 at 09:13
are you looking for something like this -> http://jsfiddle.net/kdRJ7/64/ Just drag the menuitem with mouse or use keyboard left or right arrows — RRR, Mar 02 '16 at 10:22

score 20 · Accepted Answer · edited Mar 28 '16 at 23:34

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>

I tried Owl Carousal also may be messed up after some time, You solution is clean. I will fine tune it for different devices. Thanks. — Learning, Mar 07 '16 at 04:46

Dax · Answer 2 · 2019-01-16T15:42:46.837

8

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)

edited Jan 16 '19 at 15:42

answered Mar 02 '16 at 10:32

Dax

423
2
7

I can't scroll now. I added another element to the tab, it is not allowing to scroll to right to see it. – Learning Mar 02 '16 at 10:51
weird, I tested my codepen on firefox, chrome and chrome mobile and it works, i've even updated it to use 7 tabs without problems. Are you encoutering this problem with my codepen or with your local code? – Dax Mar 02 '16 at 11:14
I opened the same link on FF and i was not able to scroll. let me try another browser. – Learning Mar 02 '16 at 11:21
I tried same on chrome i am not able to see sixth or seventh item.. i cant scroll to these items. – Learning Mar 02 '16 at 11:25
@Learning The scrolling does not work when using the mouse wheel, but you can scroll by dragging if you view it in device-mode. About this solution: I suggest hiding the scrollbar by using .tab-nav-wrapper > ul::-webkit-scrollbar { display: none; } rather than adjusting the size of the wrapper to hide it. – ArneHugo Mar 06 '16 at 20:26

ArneHugo · Answer 3 · 2016-03-06T20:09:36.180

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.

You're right, @Kosmonaft. I think [sjkm's answer](https://stackoverflow.com/a/35831906/2054731) and [Dax's answer](https://stackoverflow.com/a/35744639/2054731) have better solutions. — ArneHugo, May 23 '18 at 20:55

score 3 · Answer 4 · answered Mar 06 '16 at 20:07

3

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

answered Mar 06 '16 at 20:07

sjkm

3,706
2
22
42

Nice and simple answer. I suggest hiding the scrollbar by using `.tab-nav-wrapper > ul::-webkit-scrollbar { display: none; }` rather than adjusting the size of the wrapper to hide it. – ArneHugo Mar 06 '16 at 20:23
@ArneHugo Thank you! That's a great suggestion :). However, I assume it wouldn't work on all browsers, would it? – sjkm Mar 06 '16 at 20:25
I could not find an updated overview of browser support for scrollbars, but I did find this http://stackoverflow.com/a/14150577/2054731 So you're right, it's not guaranteed to work on all browsers. – ArneHugo Mar 06 '16 at 20:37
@ArneHugo Thank you for looking it up. Still a good idea. To avoid having to adjust the size of the wrapper one could write a small javascript that substracts the height of the scrollbar from the wrapper ($('#wrapper')[0].scrollHeight). – sjkm Mar 06 '16 at 20:42

Horizontal Tab based menu with scrolling tabs

4 Answers4

Linked