基于水平标签的滚动标签菜单

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选项来调整不同宽度的显示标签数量，但您可以修改它。这里是a Fiddle和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>

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一个固定的高度应该是锂项目的高度（导航项）和隐藏要素溢出（在这里我们想隐藏滚动条）：

.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