基于水平标签的菜单,带有滚动标签

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>

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>

Answer 2

我用以下代码改变了你的codepen,它基本上通过强制包装器高度并隐藏其溢出来隐藏滚动条.

.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

编辑:请记住,为了能够滚动此菜单,您需要一个能够水平滚动的设备(例如触摸设备或触控板)