Bootstrap 垂直滚动选项卡

Question

So I have the following code (which you can see below):

JavaScript:

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();
    }
}

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

    });
});

$('.scroller-left').click(function()
{
    $('.scroller-right').fadeIn('slow');
    $('.scroller-left').fadeOut('slow');

    $('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){

    });
});

CSS:

.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;
}

.scroller-right{
    float:right;
}

.scroller-left {
    float:left;
}

HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" type="text/css" />

<div class="container">
    <div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left" /></div>
    <div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right" /></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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>

Preview

The code above creates a horizontal menu which works well. The menu has arrows to scroll horizontally.

So there are these following questions - How to do it:

• I would like to turn them into vertical ones (-> 150px high).

• I need to replace this menu with a vertical one. The items in the menu are to go from top to bottom. The menu is to have a height of 150px.

Answer 1

This is not actual but somewhat near to your desired output ! :

 var hidHeight; var scrollBarHieghts = 40; var heightOfList = function(){ var itemsHeight = 0; $('.list li').each(function(){ var itemHeight = $(this).outerHeight(); itemsHeight+=itemHeight; }); return itemsHeight; }; var heightOfHidden = function(){ return (($('.wrapper').outerHeight())-heightOfList()-getTopPosi())-scrollBarHieghts; }; var getTopPosi = function(){ return $('.list').position().top; }; var reAdjust = function(){ if (($('.wrapper').outerHeight()) < heightOfList()) { $('.scroller-down').show(); } else { $('.scroller-down').hide(); } if (getTopPosi()<0) { $('.scroller-up').show(); } else { $('.item').animate({top:"-="+getTopPosi()+"px"},'slow'); $('.scroller-up').hide(); } } reAdjust(); $(window).on('resize',function(e){ reAdjust(); }); $('.scroller-down').click(function() { $('.scroller-up').fadeIn('slow'); $('.scroller-down').fadeOut('slow'); $('.list').animate({top:"+="+heightOfHidden()+"px"},'slow',function(){ }); }); $('.scroller-up').click(function() { $('.scroller-down').fadeIn('slow'); $('.scroller-up').fadeOut('slow'); $('.list').animate({top:"-="+getTopPosi()+"px"},'slow',function(){ }); });

 .wrapper { position: relative; margin-top: 25px; overflow: hidden; padding: 5px; height: 90vh; width: 100px; } .list { position: absolute; left: 0px; top: 0px; margin-left: 12px; margin-top: 10px; margin-bottom: 10px; } .list li{ display: table-cell; position: relative; 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; position: absolute; } .scroller-up { z-index: 100; top: 0; } .scroller-down{ z-index: 100; bottom: 0; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" type="text/css" /> <div class="container"> <div class="scroller scroller-up"><i class="glyphicon glyphicon-chevron-up"></i></div> <div class="scroller scroller-down"><i class="glyphicon glyphicon-chevron-down"></i></div> <div class="wrapper"> <ul class="nav nav-pills nav-stacked list" id="myTab"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> <li><a href="#">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> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>

Answer 2

 var hidHeight; var scrollBarHieghts = 40; var heightOfList = function(){ var itemsHeight = 0; $('.list li').each(function(){ var itemHeight = $(this).outerHeight(); itemsHeight+=itemHeight; }); return itemsHeight; }; var heightOfHidden = function(){ return (($('.wrapper').outerHeight())-heightOfList()-getTopPosi())-scrollBarHieghts; }; var getTopPosi = function(){ return $('.list').position().top; }; var reAdjust = function(){ if (($('.wrapper').outerHeight()) < heightOfList()) { $('.scroller-down').show(); } else { $('.scroller-down').hide(); } if (getTopPosi()<0) { $('.scroller-up').show(); } else { $('.item').animate({top:"-="+getTopPosi()+"px"},'slow'); $('.scroller-up').hide(); } } reAdjust(); $(window).on('resize',function(e){ reAdjust(); }); $('.scroller-down').click(function() { $('.scroller-up').fadeIn('slow'); $('.scroller-down').fadeOut('slow'); $('.list').animate({top:"+="+heightOfHidden()+"px"},'slow',function(){ }); }); $('.scroller-up').click(function() { $('.scroller-down').fadeIn('slow'); $('.scroller-up').fadeOut('slow'); $('.list').animate({top:"-="+getTopPosi()+"px"},'slow',function(){ }); });

 .wrapper { position: relative; margin-top: 25px; overflow: hidden; padding: 5px; height: 90vh; width: 100px; } .list { position: absolute; left: 0px; top: 0px; margin-left: 12px; margin-top: 10px; margin-bottom: 10px; } .list li{ display: table-cell; position: relative; 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; position: absolute; } .scroller-up { z-index: 100; top: 0; } .scroller-down{ z-index: 100; bottom: 0; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" type="text/css" /> <div class="container"> <div class="scroller scroller-up"><i class="glyphicon glyphicon-chevron-up"></i></div> <div class="scroller scroller-down"><i class="glyphicon glyphicon-chevron-down"></i></div> <div class="wrapper"> <ul class="nav nav-pills nav-stacked list" id="myTab"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> <li><a href="#">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> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>