如果達到限制，可移動動態引導選項卡菜單滑塊

我在我的網站中有動態選項卡菜單，選項卡菜單項可能是2或3，可能是20+。所以當導航項目超過10+時自動下降到第二行見here。如果達到限制，可移動動態引導選項卡菜單滑塊

我不想要這種效果，我想如果導航限制到達，所以下一個箭頭圖標出現，通過點擊它，剩下的菜單項將向左移動。

我試過但沒有成功。

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") 
    } 

    }); 
}

Bootply

注意：我不想爲這個小東西使用任何插件也確保滑塊應該是響應。

謝謝

來源

2016-07-22 Ismail Farooq

什麼你正在尋找的是右側的菜單項滑蓋的？看看http://www.owlgraphic.com/owlcarousel/demos/custom.html –

我不想使用整個插件只是爲了這個小功能 –

根據你的問題，你的'bootply demo'工作正常，你還想要什麼？ –

我通過計算每個項目設置的固定寬度。它的工作現在完美。

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() { 
 
    \t 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>

來源

2016-07-26 11:08:15

只需定義一個全球性的「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">

來源

2016-07-25 10:04:17 TTCC

我測試你的代碼時，它不工作正常當我調整瀏覽器到小尺寸 –

我將在稍後發佈jsfiddle。 – TTCC

感謝您的回答:) http://www.bootply.com/iNnyFLN4p4 –

如果設置在UL <ul class="nav nav-tabs">一個非常大的寬度的標籤將顯示一條長長的路線。

您可能需要一些JS來檢查窗口寬度和總製表符的寬度，以查看是否需要顯示您的箭頭。

然後箭頭可以觸發一些JS移動UL顯示其他選項卡。

更新： 參見實施例撥弄：https://jsfiddle.net/hq0189rd/

來源

2016-07-25 12:10:44

問題依然如此，如何？我需要示例 –

看看我已經添加的JS小提琴。這就是你需要的。 –

看到上面的答案它幾乎正確它只有一個問題菜單按鈕削減最後/第一項當幻燈片 –

如果達到限制，可移動動態引導選項卡菜單滑塊

回答

相關問題