タブのような単純な水平メニューがあります。BBCアプリのタブメニューのように動作するようにしたいので、メニューの項目が多い場合は両方向に水平スクロールできます。
私のコードと同じものがここにあります http://codepen.io/anon/pen/GZRaee
私はそれをいくつか試しましたが、メニューを固定幅で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>
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>
基本的に、ラッパーの高さを強制し、オーバーフローを非表示にすることでスクロールバーを非表示にする次のコードでコードペンを変更しました。
.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
編集:このメニューをスクロールするには、水平方向にスクロールできるデバイス(タッチデバイスやトラックパッドなど)が必要です。
要素のコンテンツをスクロール可能にするには、最初に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-wrapper
elementに)表示したくない場合は、このように非表示にできます。
.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 [〜#〜]:このコードペンの例では、スクロールに問題があります。マウスホイールスクロールは機能しませんが、デバイス上で表示している場合、またはブラウザの開発モード+デバイスモードでドラッグしている場合は、ドラッグしてスクロールできます。
簡単な解決策:
.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