web-dev-qa-db-ja.com

スクロールタブ付きの水平タブベースのメニュー

タブのような単純な水平メニューがあります。BBCアプリのタブメニューのように動作するようにしたいので、メニューの項目が多い場合は両方向に水平スクロールできます。

私のコードと同じものがここにあります http://codepen.io/anon/pen/GZRaee

enter image description here

私はそれをいくつか試しましたが、メニューを固定幅でdivにラップしてスクロール可能にしようとしましたが、それは常にスクロールバーを追加するので機能しませんでしたカルーセルを作ろうとしましたが、私にはうまくいきませんでした。

HTMLベースのWebサイト用の同様のプラグはありますか。 BBCアプリで使用されるナビゲーションバーはアプリでは非常に一般的です。モバイル版のHTMLベースのWebページでも同様のものがあればいいのにと思います。

<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>
javascriptjqueryhtmlcsscss3
25
Learning

Owl Carousel 2 でこれを行うことができます。ご覧のとおり、マウスドラッグでタブを水平方向にスクロールできます。水平スクロールバーはありません。また、responsiveオプションを使用して、さまざまな幅の表示タブの数を調整しましたが、変更することができます。ここに a Fiddle と another Fiddle with arrow。

//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>
18
Nenad Vracar

基本的に、ラッパーの高さを強制し、オーバーフローを非表示にすることでスクロールバーを非表示にする次のコードでコードペンを変更しました。

.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

編集：このメニューをスクロールするには、水平方向にスクロールできるデバイス（タッチデバイスやトラックパッドなど）が必要です。

8
Dax

要素のコンテンツをスクロール可能にするには、最初にoverflow: scrollまたはoverflow: autoを要素に追加する必要があります。 （違いを参照してください ここ 。）

.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-wrapperelementに）表示したくない場合は、このように非表示にできます。

.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 [〜＃〜]：このコードペンの例では、スクロールに問題があります。マウスホイールスクロールは機能しませんが、デバイス上で表示している場合、またはブラウザの開発モード+デバイスモードでドラッグしている場合は、ドラッグしてスクロールできます。

3
ArneHugo

簡単な解決策：

.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

3
sjkm