"scrolling menu"
Bootstrap 3.3.0 Snippet by ipoelnet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left"></i></div>
<div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right"></i></div>
<div class="wrapper">
<ul class="nav nav-tabs list" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="#">Tab4</a></li>
<li><a href="#">Tab5</a></li>
<li><a href="#">Tab6</a></li>
<li><a href="#">Tab7</a></li>
<li><a href="#">Tab8</a></li>
<li><a href="#">Tab9</a></li>
<li><a href="#">Tab10</a></li>
<li><a href="#">Tab11</a></li>
<li><a href="#">Tab12</a></li>
<li><a href="#">Tab13</a></li>
<li><a href="#">Tab14</a></li>
<li><a href="#">Tab15</a></li>
<li><a href="#">Tab16</a></li>
<li><a href="#">Tab17</a></li>
</ul>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.wrapper {
position:relative;
margin:0 auto;
overflow:hidden;
padding:5px;
height:50px;
}
.list {
position:absolute;
left:0px;
top:0px;
min-width:3000px;
margin-left:12px;
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:11px;
white-space:no-wrap;
vertical-align:middle;
background-color:#fff;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var hidWidth;
var scrollBarWidths = 40;
var widthOfList = function(){
var itemsWidth = 0;
$('.list li').each(function(){
var itemWidth = $(this).outerWidth();
itemsWidth+=itemWidth;
});
return itemsWidth;
};
var widthOfHidden = function(){
return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
};
var getLeftPosi = function(){
return $('.list').position().left;
};
var reAdjust = function(){
if (($('.wrapper').outerWidth()) < widthOfList()) {
$('.scroller-right').show();
}
else {
$('.scroller-right').hide();
}
if (getLeftPosi()<0) {
$('.scroller-left').show();
}
else {
$('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
$('.scroller-left').hide();
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: