如果达到限制，可移动动态引导选项卡菜单滑块
Movable dynamic Bootstrap Tab menu slider if limit reached
我的网站上有动态选项卡菜单，选项卡菜单项可能是2或3，也可能是20+。所以当导航项目超过10+时，会自动下降到第二行，请参阅此处。
我不想要这种效果，我想要如果达到导航限制，那么下一个箭头图标就会出现，点击它，剩下的菜单项就会向左移动。
我试着追随，但没有成功。
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")
}
});
}
引导
注意：我不想在这个小事情上使用任何插件，也要确保滑块应该是响应的。
感谢
只需定义一个globle"currPage"变量。试试这个（见jsfiddle）：
var menus = $("#menus"), menuWidth = menus.parent().outerWidth();
var menupage = Math.ceil(menus[0].scrollWidth / menuWidth), currPage = 1;
if (menupage > 1) {
$("#goNext").click(function () {
currPage < menupage && menus.stop(true).animate({
"left": -menuWidth * currPage
}, "slow") && currPage++
});
$("#goPrev").click(function () {
currPage > 1 && menus.stop(true).animate({
"left": -menuWidth * (currPage - 2)
}, "slow") && currPage--;
});
$(window).on("resize", function () {
menuWidth = menus.parent().outerWidth();
menupage = Math.ceil(menus[0].scrollWidth / menuWidth);
currPage = Math.ceil(-parseInt(menus.css("left")) / menuWidth) + 1;
});
}/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
.tab-slider {
padding:0 40px;
}
.tab-slider .btn-icon {
position: absolute;
top: 5px;
}
#goPrev {
left:0;
}
#goNext {
right:0;
}
.wrap {
overflow: hidden;
position: relative;
white-space: nowrap;
width: 100%;
background: #dad9d9;
border: 1px solid #efefef;
font-size: 0;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
border: 1px solid transparent;
}
.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;
font-size: 14px;
}
.nav-tabs>li>a {
margin-right: 0;
border-radius: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="tab-slider">
<div class="wrap">
<ul class="nav nav-tabs" id="menus">
<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="#">Tab13 example</a></li>
<li><a href="#">Tab14 example</a></li>
<li><a href="#">Tab15 example</a></li>
<li><a href="#">Tab16 example</a></li>
<li><a href="#">Tab17 example</a></li>
</ul>
</div>
<button id="goPrev" class="btn btn-default btn-icon"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button id="goNext" class="btn btn-default btn-icon"><i class="glyphicon glyphicon-chevron-right"></i></button>
</div>注意：我将id menus添加到您的<ul class="nav nav-tabs">
我通过计算每个项目来设置固定宽度。它现在运行得很完美。
function itemWidth() {
// get the larger item to set the width of every item
var largestWidth = 0;
$(".nav-tabs>li>a").each(function() {
if ($(this).outerWidth() > largestWidth) {
largestWidth = $(this).outerWidth();
}
});
Wrap = $(".wrap").outerWidth(); // the wrapper full width
someSpace = largestWidth + 10; // make some space, 5px each side
roundFigure = Wrap / someSpace; // parent width divided by larger item width
roundFigure = Math.round(roundFigure); // round the figure
finalWidth = Wrap / roundFigure; // get the final width
$(".nav-tabs>li>a").outerWidth(finalWidth); // set the final width
}
itemWidth(); // call the funcation
// do the magic
var menus = $("#menus"),
menuWidth = menus.parent().outerWidth();
var menupage = Math.ceil(menus[0].scrollWidth / menuWidth),
currPage = 1;
if (menupage > 1) {
$("#goNext").click(function() {
currPage < menupage && menus.stop(true).animate({
"left": -menuWidth * currPage
}, "slow") && currPage++
});
$("#goPrev").click(function() {
currPage > 1 && menus.stop(true).animate({
"left": -menuWidth * (currPage - 2)
}, "slow") && currPage--;
});
// refresh on resize
$(window).on("resize", function() {
itemWidth();
menuWidth = menus.parent().outerWidth();
menupage = Math.ceil(menus[0].scrollWidth / menuWidth);
currPage = Math.ceil(-parseInt(menus.css("left")) / menuWidth) + 1;
});
}@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
.tab-slider {
padding: 0 40px;
}
.tab-slider .btn-icon {
position: absolute;
top: 5px;
}
#goPrev {
left: 0;
}
#goNext {
right: 0;
}
.wrap {
overflow: hidden;
position: relative;
white-space: nowrap;
width: 100%;
background: #dad9d9;
border: 1px solid #efefef;
font-size: 0;
}
.nav-tabs>li>a {
text-align: center;
padding-left: 0;
padding-right: 0;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
border: 1px solid transparent;
}
.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;
font-size: 14px;
}
.nav-tabs>li>a {
margin-right: 0;
border-radius: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-slider">
<div class="wrap">
<ul class="nav nav-tabs" id="menus">
<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="#">Tab13 example</a></li>
<li><a href="#">Tab14 example</a></li>
<li><a href="#">Tab15 example</a></li>
<li><a href="#">Tab16 example</a></li>
<li><a href="#">Tab17 example</a></li>
</ul>
</div>
<button id="goPrev" class="btn btn-default btn-icon"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button id="goNext" class="btn btn-default btn-icon"><i class="glyphicon glyphicon-chevron-right"></i></button>
</div>如果在UL <ul class="nav nav-tabs">上设置了非常大的宽度，则选项卡将显示在一条长行中。
您可能需要一些JS来检查窗口宽度和总选项卡的宽度，看看是否需要显示箭头。
然后，箭头可以触发一些JS来移动UL以显示其他选项卡。
更新：参见小提琴示例：https://jsfiddle.net/hq0189rd/
相关文章：
- 如何将CSS(特别是填充/边距）应用于select下拉菜单的选项或optgroup
- 在BootStrap菜单栏中为所选项目设置背景，类似于BootStrap中的父导航选项
- 重置为下拉菜单中的未绑定选项
- 使用java脚本更改onClick事件中菜单选项卡的颜色
- 选择菜单重置为以前选择的选项
- JQueryUI选择菜单-如何添加更多选项
- 如何在javascript中从选项菜单中进行选择
- 在javascript/jquery中获取选择选项菜单
- Chrome 扩展程序选项菜单无法关闭
- 多个选定的索引查询(选择选项菜单）出现问题
- 将普通桌面菜单转换为选择选项菜单(用于移动版本)
- 每个td-li标记上的Onmouseover选项菜单
- 验证下拉选项(菜单)
- 表排序javascript使用选择选项菜单
- 下拉选项菜单与javascript
- disabled和selected在自定义选择选项菜单(Javascript）中不起作用
- 用javascript创建一个选项菜单
- 具有2个值的选项菜单
- 使用数组中的值创建HTML选项菜单
- jQuery -包含尝试选择选项菜单时的问题
