Horizontal Menu Scrolling

问题

I have Menu item from Menu1 to Menu10, but due to space constraint in web page I can't show all the MenuItem. I can show 4 menu item, rest all will be accessible by clicking left and right arrow at the end of menu item. Currently I am showing Menu4 to Menu7.

i.e <- [Menu4][Menu5][Menu6][Menu7] ->

So when I click on Left/Right arrow, Menu items will scroll horizontally. I tried searching on net, but didn't got any solution. here is what I did till now

link

HTML Code

<ul>
<li>
    <a href="#">Menu1</a>
</li>
<li>
    <a href="#">Menu2</a>
</li>
<li>
    <a href="#">Menu3</a>
</li> 
<li>
    <a href="#">Menu4</a>
</li>
<li>
    <a href="#">Menu5</a>
</li>
<li>
    <a href="#">Menu6</a>
</li>
<li>
    <a href="#">Menu7</a>
</li>
<li>
    <a href="#">Menu8</a>
</li> 
<li>
    <a href="#">Menu9</a>
</li>
<li>
    <a href="#">Menu10</a>
</li>

Note: I am using bootstrap also,any bootstrap help is appreciated

回答1:

A quick way is to use a jquery plugin, very easy to use even if you do not know very well html and css.
You can find a use example here.

I Hope it helps you.

回答2:

I think this is what you're looking for ..

http://www.bootply.com/QhA0MPMKtI

I was searching for it for more than an hour

JS:

var hidWidth;
var scrollBarWidths = 40;

var widthOfList = function(){
  var itemsWidth = 0;
  $('.item').each(function(){
    var itemWidth = $(this).outerWidth();
    itemsWidth+=itemWidth;
  });
  //alert(itemsWidth);
  return itemsWidth;
};

var widthOfHidden = function(){
  return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
};

var getLeftPosi = function(){
  //return $('.item:first-child').position().left;
  return $('.list').position().left;
};

var reAdjust = function(){
  if (($('.wrapper').outerWidth()) < widthOfList()) {
    $('.scroller-right').show();
  }
  else {
    $('.scroller-right').hide();
    /*
    var leftPos = $('.item:first-child').position().left;
    $('.item').animate({left:"-="+leftPos+"px"},'slow');
    */
  }

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

$('.scroller-left').click(function() {
    //var leftPos = $('.item:first-child').position().left;
    //$('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
    //$('.scroller-left').hide();

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

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

    });

});    

CSS:

#topMenu {
        background-color:#222;
    overflow: auto;
}

#box {
  background-color:#111111;
  position:relative;
  /*margin:0 auto;*/
  padding:5px;
  width:90%;
}

.scroller {
  color:#ffffff;
  width:40px;
  text-align:center;
  cursor:pointer;
  display:none;
  padding:5px;
  margin-top:5px;
}

.scroller-right{
  float:right;
}

.scroller-left {
  float:left;
}

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


.item{
    padding:10px;
   /*float:left;*/
    display:table-cell;
    margin:1px;
    position:relative;
    text-align:center;
    cursor:grab;
    cursor:-webkit-grab;
    color:#efefef;
    border: 1px dotted #111;
   vertical-align:middle;
}

HTML:

<div id="topMenu">
<div id="box">
  <div class="scroller scroller-left"><i class="icon-chevron-left icon-3x"></i></div>
  <div class="scroller scroller-right"><i class="icon-chevron-right icon-3x"></i></div>
  <div class="wrapper">
    <div class="list">
      <div class="item">One</div>
      <div class="item">Step 2</div>
      <div class="item">Workflow 3<br>sdsdfsdf</div>
      <div class="item">4</div>
      <div class="item">Five</div>
      <div class="item">Six</div>
      <div class="item">Seven</div>
      <div class="item">8</div>
      <div class="item">Nine</div>
      <div class="item">Nine</div>
      <div class="item">Nine</div>
      <div class="item">Nine</div>
      <div class="item">Nine</div>

      <div class="item">Ten Ten Ten</div>
      <div class="item">Een!</div>
      <div class="item">Ereferfewrfen!</div>
      <div class="item">Eerferfen!</div>
      <div class="item">WWW!</div>

      <div class="item">Ten Ten Ten</div>
      <div class="item">Een!</div>
      <div class="item">Ereferfewrfen!</div>
      <div class="item">Eerferfen!</div>

      <div class="item">Ten Ten Ten</div>
      <div class="item">Een!</div>
      <div class="item">Ereferfewrfen!</div>
      <div class="item">Last item</div>
    </div>
  </div>
</div>
</div>

来源：https://stackoverflow.com/questions/25030400/horizontal-menu-scrolling