Question

我有一个简单的水平菜单，更像是标签..我希望它像BBC应用标签菜单一样工作，这样当菜单有更多项目时，它将允许两个方向水平滚动。

我尝试了一些东西，但似乎没有任何工作就像我用固定宽度包装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选项调整不同宽度的显示标签数量，但您可以修改它。这是a Fiddle和another Fiddle with arrows.

＆＃13;

//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');
});

＆＃13;

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;

＆＃13;

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

＆＃13;

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

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

Answer 3

要使元素中的内容可滚动，首先我们需要向元素添加overflow: scroll或overflow: auto。（参见差异here。）

.tab-nav-wrapper {
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
  overflow: scroll; /* add */
}

然后我们需要让内容占用尽可能多的空间。删除width: 100%以允许该操作。另外，添加white-space: nowrap以防止内容分成多行。

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

最后，如果您不希望滚动条显示（在.tab-nav-wrapper元素上），您可以将其隐藏起来。

.tab-nav-wrapper::-webkit-scrollbar { 
  display: none; 
}

最后，将背景从tab-nav-wrapper > ul移至tab-nav-wrapper。这是因为ul不会覆盖所有内容，但是包装器会这样做。

.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 */
}

小提琴：http://codepen.io/anon/pen/VaeLje

NB ：此codepen示例中存在滚动问题。鼠标滚轮不起作用，但如果您在设备上查看它，或者在浏览器中以开发模式+设备模式查看，则可以通过拖动滚动。

Answer 4

一个简单的解决方案：

给.tab-nav-wrapper一个固定高度，该高度应该是li项目（导航项目）的高度，并隐藏溢出的元素（这里我们要隐藏滚动条）：

.tab-nav-wrapper {
  overflow: hidden; // magic is here
  height: 48px; // magic is here
}

然后使ul可滚动（仅x方向）并防止li元素突破到新行：

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

这就是全部:)。没有必要的JavaScript才能使其有效：http://codepen.io/anon/pen/RarPxp

基于水平制表符的菜单，带有滚动标签

4 个答案: