Question

很抱歉再次提出类似的问题我想做横向导航，但我的选择是溢出。
我想隐藏溢出，并删除底部的滚动条。但是能够显示子菜单

CSS：

html{height:100%}
body{height:100%;min-height:100%;position:relative}
header{width:100%;text-align:center;border-bottom:1px solid #e7eaec;}
#sidebar{white-space:nowrap;width:100%;display:inline-flex}
.scroller-right{  float:right;}
.scroller-left {  float:left;}
.wrapper{height:100%;display:flex;flex-direction:column;justify-content:space-between;} 
.glyphicon{position:absolute;}
.navbar-header{width:15%;text-align:left}
.navbar-collapse {position:relative;width:85%;float:right;padding-left:0px;padding-right:0px;}
.navbar{margin:0;border:0;width:100%;border-radius:0px;}

HTML：

<html>
  <body>
    <div class="wrapper">
      <header>
        <div class="navbar navbar-default" role="navigation">
          <div class="container-fluid">
            <div class="navbar-header">
                logo pic
            </div>
            <div class="navbar-collapse collapse">
              <div class="nav-wrapper" style="height:50px;padding:0 15px">
                <div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left" style="left:0;top:18px"></i></div>
                <div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right" style="right:0;top:18px"></i></div>
                <ul class="nav navbar-nav" id="sidebar" s>
                   <li><a href="#">home</a></li>
                   <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">staff</a>
                     <ul class="dropdown-menu">
                       <li>123</li>
                       <li>456</li>
                     </ul>
                   </li>
                   <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">inventory</a>
                     <ul class="dropdown-menu">
                       <li>789</li>
                       <li>asd</li>
                     </ul>
                   </li>
                   <li class="dropdown">leave</li>
                   <li>insurance</li>
                   <li>room</li>
                   <li>settings</li>
                   <li>system</li>
                   <li>company</li>
                   <li>item</li>
                   <li>sales</li>
                   <li>project</li>
                   <li>contract</li>
                   <li>test</li>
                   <li>group</li>
                   <li>user</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </header>
    </div>
  </body>
</html>

JS

$(function() {

    var items = $('.nav').width();

    $('.scroller-right').click(function () {
        $(".nav").animate({
            scrollLeft: '+='+items
        },function(){
            // right();
        });
    });
    $('.scroller-left').click(function () {
        $( ".nav" ).animate({
            scrollLeft: "-="+items
        },function(){
            // left();
        });
    });

    $(window).on('resize',function(){    
        if( $('.nav').scrollLeft()>$(".nav")[0].scrollWidth-items){$('.scroller-right').show();}

    });

    if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        var scrolling = false;

        $(".scroller-right").bind("mouseover", function(event) {
            scrolling = true;
            scrollContent("right");
           $('.scroller-left').show();
        }).bind("mouseout", function(event) {
            scrolling = false;
        });

        $(".scroller-left").bind("mouseover", function(event) {
            scrolling = true;
            scrollContent("left");
            $('.scroller-right').show();
        }).bind("mouseout", function(event) {
            scrolling = false;
        });

        function scrollContent(direction) {
            var amount = (direction === "left" ? "-=10px" : "+=10px");
            $(".nav").animate({
                scrollLeft: amount
            }, 1,function() {
                if (scrolling) {
                    scrollContent(direction);
                }
                // left();
                // right();
            });
        }
    }
});

html：水平下拉菜单溢出问题

0 个答案: