219 lines
9.5 KiB
HTML
219 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Scrollable Tabs Bootstrap 4</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
|
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet">
|
|
|
|
<style>
|
|
.wrapper-nav {
|
|
position:relative;
|
|
margin:0 auto;
|
|
overflow:hidden;
|
|
padding:5px;
|
|
height:50px;
|
|
}
|
|
|
|
.list {
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
min-width:3500px;
|
|
margin-top:0px;
|
|
}
|
|
|
|
.list li{
|
|
display:table-cell;
|
|
position:relative;
|
|
text-align:center;
|
|
cursor:grab;
|
|
cursor:-webkit-grab;
|
|
color:#efefef;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
.scroller {
|
|
text-align:center;
|
|
cursor:pointer;
|
|
display:none;
|
|
padding:7px;
|
|
padding-top:13px;
|
|
white-space:no-wrap;
|
|
vertical-align:middle;
|
|
background-color:#fff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="w-100 pt-3">
|
|
<div class="scroller scroller-left float-left mt-2"><i class="fa fa-chevron-left"></i></div>
|
|
<div class="scroller scroller-right float-right mt-2"><i class="fa fa-chevron-right"></i></div>
|
|
<div class="wrapper-nav">
|
|
<nav class="nav nav-tabs list mt-2" id="myTab" role="tablist">
|
|
<a class="nav-item nav-link active" data-toggle="tab" href="#tab1" role="tab" aria-controls="public" aria-expanded="true">Tab1</a>
|
|
<a class="nav-item nav-link" href="#tab2" role="tab" data-toggle="tab">Tab 2</a>
|
|
<a class="nav-item nav-link" href="#tab3" role="tab" data-toggle="tab">Tab 3</a>
|
|
<a class="nav-item nav-link" href="#tab4" role="tab" data-toggle="tab">Tab 4</a>
|
|
<a class="nav-item nav-link" href="#tab5" role="tab" data-toggle="tab">Tab 5</a>
|
|
<a class="nav-item nav-link" href="#tab6" role="tab" data-toggle="tab">Tab 6</a>
|
|
<a class="nav-item nav-link" href="#tab7" role="tab" data-toggle="tab">Tab 7</a>
|
|
<a class="nav-item nav-link" href="#tab8" role="tab" data-toggle="tab">Tab 8</a>
|
|
<a class="nav-item nav-link" href="#tab9" role="tab" data-toggle="tab">Tab 9</a>
|
|
<a class="nav-item nav-link" href="#tab10" role="tab" data-toggle="tab">Tab 10</a>
|
|
<a class="nav-item nav-link" href="#tab11" role="tab" data-toggle="tab">Tab 11</a>
|
|
<a class="nav-item nav-link" href="#tab12" role="tab" data-toggle="tab">Tab 12</a>
|
|
<a class="nav-item nav-link" href="#tab13" role="tab" data-toggle="tab">Tab 13</a>
|
|
<a class="nav-item nav-link" href="#tab14" role="tab" data-toggle="tab">Tab 14</a>
|
|
<a class="nav-item nav-link" href="#tab15" role="tab" data-toggle="tab">Tab 15</a>
|
|
<a class="nav-item nav-link" href="#tab16" role="tab" data-toggle="tab">Tab 16</a>
|
|
</nav>
|
|
</div>
|
|
<div class="tab-content p-3" id="myTabContent">
|
|
<div role="tabpanel" class="tab-pane fade active show mt-2" id="tab1" aria-labelledby="public-tab" aria-expanded="true">
|
|
This is the content of Tab 1...
|
|
</div>
|
|
<div class="tab-pane fade mt-2" id="tab2" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
|
This is the content of Tab 2...
|
|
</div>
|
|
<div class="tab-pane fade mt-2" id="tab3" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
|
This is the content of Tab 3...
|
|
</div>
|
|
<div class="tab-pane fade mt-2" id="tab4" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
|
This is the content of Tab 4...
|
|
</div>
|
|
<div class="tab-pane fade mt-2" id="tab5" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
|
This is the content of Tab 5...
|
|
</div>
|
|
<div class="tab-pane fade mt-2" id="tab6" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
|
This is the content of Tab 6...
|
|
</div>
|
|
<div class="tab-pane fade mt-2" id="tab7" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
|
This is the content of Tab 7...
|
|
</div>
|
|
<div class="tab-pane fade mt-2" id="tab8" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
|
This is the content of Tab 8...
|
|
</div>
|
|
<div class="tab-pane fade mt-2" id="tab9" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
|
This is the content of Tab 9...
|
|
</div>
|
|
<div class="tab-pane fade mt-2" id="tab10" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
|
This is the content of Tab 10...
|
|
</div>
|
|
<div class="tab-pane fade mt-2" id="tab11" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
|
This is the content of Tab 11...
|
|
</div>
|
|
<div class="tab-pane fade mt-2" id="tab12" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
|
This is the content of Tab 12...
|
|
</div>
|
|
<div class="tab-pane fade mt-2" id="tab13" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
|
This is the content of Tab 13...
|
|
</div>
|
|
<div class="tab-pane fade mt-2" id="tab14" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
|
This is the content of Tab 14...
|
|
</div>
|
|
<div class="tab-pane fade mt-2" id="tab15" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
|
This is the content of Tab 15...
|
|
</div>
|
|
<div class="tab-pane fade mt-2" id="tab16" role="tabpanel" aria-labelledby="group-dropdown2-tab" aria-expanded="false">
|
|
This is the content of Tab 16...
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var hidWidth;
|
|
var scrollBarWidths = 40;
|
|
|
|
var widthOfList = function() {
|
|
var itemsWidth = 0;
|
|
$('.list a').each(function() {
|
|
var itemWidth = $(this).outerWidth();
|
|
itemsWidth += itemWidth;
|
|
});
|
|
return itemsWidth;
|
|
};
|
|
|
|
var widthOfHidden = function(){
|
|
var ww = 0 - $('.wrapper-nav').outerWidth();
|
|
|
|
var hw = (($('.wrapper-nav').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;
|
|
|
|
var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth());
|
|
|
|
if (ww > hw) {
|
|
//return ww;
|
|
return (rp > ww ? rp : ww);
|
|
}
|
|
else {
|
|
//return hw;
|
|
return (rp > hw ? rp : hw);
|
|
}
|
|
};
|
|
|
|
var getLeftPosi = function(){
|
|
|
|
var ww = 0 - $('.wrapper-nav').outerWidth();
|
|
var lp = $('.list').position().left;
|
|
|
|
if (ww > lp) {
|
|
return ww;
|
|
}
|
|
else {
|
|
return lp;
|
|
}
|
|
};
|
|
|
|
var reAdjust = function(){
|
|
// check right pos of last nav item
|
|
var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth());
|
|
|
|
if (($('.wrapper-nav').outerWidth()) < widthOfList() && (rp < 0)) {
|
|
$('.scroller-right').show().css('display', 'flex');
|
|
}
|
|
else {
|
|
$('.scroller-right').hide();
|
|
}
|
|
|
|
if (getLeftPosi() < 0) {
|
|
$('.scroller-left').show().css('display', 'flex');
|
|
}
|
|
else {
|
|
$('.scroller-left').hide();
|
|
}
|
|
}
|
|
|
|
reAdjust();
|
|
|
|
$(window).on('resize',function(e){
|
|
reAdjust();
|
|
});
|
|
|
|
$('.scroller-right').click(function() {
|
|
$('.scroller-left').fadeIn('slow');
|
|
$('.scroller-right').fadeOut('slow');
|
|
|
|
$('.list').animate({ left: `+=${widthOfHidden()}px` }, 'slow', function() {
|
|
reAdjust();
|
|
});
|
|
});
|
|
|
|
$('.scroller-left').click(function() {
|
|
|
|
$('.scroller-right').fadeIn('slow');
|
|
$('.scroller-left').fadeOut('slow');
|
|
|
|
$('.list').animate({ left: `-=${getLeftPosi()}px` }, 'slow', function() {
|
|
reAdjust();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|