I am facing an issue with the tabs menu on my website. The tabs menu items can vary between 2 or 3 to even 20 or more. When the number of navigation items exceeds 10, they automatically drop to the second line, which you can see here.
However, I don't want this effect. I want an arrow icon to appear when the navigation limit is reached, and by clicking on it, the remaining menu items should move to the left.
I have tried the following code but have not been successful:
HTML
<div class="wrap">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tab1 example</a></li>
<li><a href="#">Tab2 example</a></li>
<li><a href="#">Tab3 example</a></li>
<li><a href="#">Tab4 example</a></li>
<li><a href="#">Tab5 example</a></li>
<li><a href="#">Tab6 example</a></li>
<li><a href="#">Tab7 example</a></li>
<li><a href="#">Tab8 example</a></li>
<li><a href="#">Tab9 example</a></li>
<li><a href="#">Tab10 example</a></li>
<li><a href="#">Tab11 example</a></li>
<li><a href="#">Tab12 example</a></li>
</ul>
</div>
<button id="goPrev">Prev</button>
<button id="goNext">Next</button>
CSS
.wrap {
overflow: hidden;
position: relative;
white-space: nowrap;
width:1000px;
background: #dad9d9;
border: 1px solid #efefef;
}
.wrap>.nav-tabs {
display: inline-block;
padding:0;
margin:0;
position: relative;
top: 0;
left: 0;
}
.wrap>.nav-tabs>li {
background: #fff;
display: inline-block;
position: relative;
white-space: normal;
float: none;
}
.nav-tabs>li>a {
margin-right: 0;
}
JavaScript/JQuery
var wrap = $(".wrap").width();
var el = $("ul").width();
if (el > wrap) {
$("#goNext").click(function() {
$("ul").stop(true);
if (-parseInt($("ul").css("left")) - wrap < 0) {
$("ul").animate({
"left": "+=-" + wrap
}, "slow")
} else {
$("ul").animate({
"left": "-" + (el - wrap)
}, "slow")
}
});
$("#goPrev").click(function() {
$("ul").stop(true);
if (-parseInt($("ul").css("left")) - wrap > 0) {
$("ul").animate({
"left": "+=" + wrap
}, "slow")
} else {
$("ul").animate({
"left": "0"
}, "slow")
}
});
}
Note: I do not want to rely on any external plugins for this small customization. Also, please ensure that the slider remains responsive.
Thank you