基於水平標籤的滾動標籤菜單

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