Question

78

Horizontal Tab based menu with scrolling tabs

rated 0 times [ 84] [ 6] / answers: 1 / hits: 31814 / 8 Years ago, wed, march 2, 2016, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

daquanmilesw

Add To Favorites

Follow

Total Points: 57

Total Questions: 102

Total Answers: 110

Location: Wallis and Futuna

Member since Sat, Aug 6, 2022

2 Years ago

answered 8 Years ago stephonkeandrer · Accepted Answer

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>