水平基于标签的菜单，带滚动选项卡 [英] Horizontal Tab based menu with scrolling tabs

问题描述

我有一个简单的水平菜单更像标签..我想它的工作像一个BBC应用程序标签菜单，所以，当菜单有更多的项目，它将允许在两个方向水平滚动。

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.

与我的代码相同的是 http://codepen.io/anon/pen / GZRaee

< img src =https://i.stack.imgur.com/TNTJX.pngalt =enter image description here>

我试过它几乎没有什么，但似乎没有工作像我包装菜单在固定宽度的div，并试图使其可滚动，但没有工作，因为它总是添加滚动条。我试图让它的旋转木马也不为我工作。

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.

有什么类似的HTML网站的插件。 BBC应用程序使用的导航栏在应用程序中很常见，我希望我可以有类似的HTML基于网页的手机版本。

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>

推荐答案

可以使用 Owl Carousel 2 。正如你可以看到，你可以水平滚动标签，鼠标拖动，没有水平滚动条。此外，我使用响应选项来调整显示不同宽度的选项卡的数量，但你可以修改。这里是小提琴和

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>

这篇关于水平基于标签的菜单，带滚动选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！