基于水平选项卡的菜单，带有滚动选项卡

Question

我有一个更像选项卡的简单水平菜单。我希望它像 BBC 应用程序选项卡菜单一样工作，这样当菜单有更多项目时，它将允许在两个方向上水平滚动。

我的代码在这里 http://codepen.io/anon/pen/GZRaee

我尝试了一些东西，但似乎没有任何效果就像我将菜单包装在固定宽度的 div 中并试图让它滚动，但这没有用，因为它总是添加滚动条。我试着让它成为旋转木马，但这对我也不起作用。

基于 HTML 的网站是否有类似的插件。 BBC 应用程序使用的导航栏在应用程序中很常见，我希望我可以为移动版本的基于 HTML 的网页提供类似的东西。

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

原文由 Learning 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 Owl Carousel 2 做到这一点。如您所见，您可以通过鼠标拖动来水平滚动选项卡，并且没有水平滚动条。我还使用了 responsive 选项来调整不同宽度的显示选项卡的数量，但你可以修改它。这是 一个小提琴 和 另一个带箭头的小提琴。

 //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>

原文由 Nenad Vracar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我用以下代码更改了您的代码笔，这些代码基本上通过强制包装高度并隐藏其溢出来隐藏滚动条。

 .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;
}

如果您不介意强制设置菜单高度，那么应该这样做。

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

编辑：请记住，为了能够滚动浏览此菜单，您需要一个能够水平滚动的设备（例如触摸设备或触控板）

原文由 Dax 发布，翻译遵循 CC BY-SA 4.0 许可协议