Question

我有从Menu1到Menu10的菜单项，但由于网页中的空间限制，我无法显示所有MenuItem。我可以显示4个菜单项，通过单击菜单项末尾的左右箭头可以访问所有菜单项。目前我正在向Menu7显示Menu4。

即＆lt; - [Menu4] [Menu5] [Menu6] [Menu7] - ＆gt;

因此，当我单击向左/向右箭头时，菜单项将水平滚动。我尝试在网上搜索，但没有得到任何解决方案。这是我到现在为止所做的事情

HTML代码

<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>

注意：我也在使用bootstrap，感谢任何bootstrap帮助

Answer 1

快速的方法是使用jquery插件，即使你不太了解html和css也非常容易使用。
您可以找到一个使用示例here。

我希望它对你有所帮助。

Answer 2

我认为这就是你要找的......

http://www.bootply.com/QhA0MPMKtI

我正在寻找它超过一个小时

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>

水平菜单滚动

2 个答案: