基於水平標簽的菜單，帶有滾動標簽

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

編輯：請記住，為了能夠滾動此菜單，您需要一個能夠水平滾動的設備（例如觸摸設備或觸控板）

Answer 3

要使元素中的內容可滾動，首先我們需要向元素添加overflow: scroll或overflow: auto 。 （見這里的差異。）

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

然后我們需要讓內容占用盡可能多的空間。 刪除width: 100%以允許。 另外，添加white-space: nowrap以防止內容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

注意 ：此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