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

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要素に）表示したくない場合は

.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::-webkit-scrollbar { 
    display: none; 
} 

最後に、tab-nav-wrapperにtab-nav-wrapper > ulからバックグラウンドを移動します。これは、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 { 
    overflow: hidden; // magic is here 
    height: 48px; // magic is here 
} 

：

は.tab-nav-wrapperに李項目（ナビゲーション項目）の高さと、そのオーバーフロー（ここでは、スクロールバーを非表示にする）の要素を非表示にする一定の高さを与えますそして

（x方向のみ）ulをスクロールすると、新しい行に破壊からの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 
} 

それはすべてです:)。 http://codepen.io/anon/pen/RarPxp