移动菜单滚动适用于桌面而非移动

时间:2017-01-23 05:00:17

标签: javascript jquery css jquery-mobile

我为我的网站创建了一个移动菜单,问题是菜单项很长。滚动适用于桌面浏览器(当测试移动大小时),但在我的iPhone上,它不起作用(在Android上未经测试)。

http://182.160.156.158/~semphnorg(特别是“资源”菜单项,了解它是如何工作/不工作的)

菜单的CSS是:

.m-mobile-menu *{position:relative}
.m-mobile-menu{position:fixed;top:0;left:0;width:100%;height:auto;overflow-y:scroll;opacity:0;visibility:hidden;transition:all 0.5s;-ms-transform:translateY(25px);-o-transform:translateY(25px);-webkit-transform:translateY(25px);transform:translateY(25px);overflow-x:hidden;z-index:-1}
.m-mobile-menu ul{padding-top:55px;z-index:99;margin:0}
.m-mobile-menu ul li.a-menu-close{position:absolute;top:0;right:0;z-index:1;background:#004067}
.m-mobile-menu ul li.a-menu-close > a{float:left;display:block;width:calc(100% - 85px);border:0;background:transparent}
.m-mobile-menu ul li.a-menu-close > a > span{font-size:160%;margin-right:15px}
.m-mobile-menu ul li.a-menu-close > a:last-child{float:right;background:#009bff;display:table;width:auto}
.m-mobile-menu ul li.a-menu-close > a:last-child > span{margin-right:0}
.m-mobile-menu li{border-bottom:1px solid rgba(0,80,117,.3);background:#fff;width:100%;margin:0;list-style:none}
.m-mobile-menu li > a,.m-mobile-menu li > span{color:#009bff}
.m-mobile-menu li:hover{background:#009bff}
.m-mobile-menu li:hover > a,.m-mobile-menu li:hover > span{color:#fff}
.m-mobile-menu li.deeper > a:after{content:"\f105";display:block;position:absolute;top:50%;right:15px;font-family:'FontAwesome';text-rendering:auto;color:#009bff;font-size:160%;margin-top:-15px;font-weight:400}
.m-mobile-menu li.deeper:hover > a:after{color:#fff}
.m-mobile-menu li > a{font-family:'open-sans',sans-serif;font-weight:700;font-size:120%;padding:24px 30px 18px;display:block;line-height:1;color:#009bff;text-decoration:none}
.m-mobile-menu li > a > i{display:none}
.m-mobile-menu .m-main-menu-child {position: fixed; top: 0; left: 0; width: 100%; opacity: 0;-webkit-transform:translateX(100%);-o-transform:translateX(100%);-ms-transform: translateX(100%);transform:translateX(100%);z-index:0;visibility:hidden;display:none;transition-delay: 0.5s; }
.m-mobile-menu .m-main-menu-child.is-open {z-index:1;opacity:1;visibility:visible;display:block;transition-delay:0s}
.m-menu-open { position:fixed;top:0;overflow:hidden; z-index: -1}
.m-mobile-menu .mobile-menu{transition:all 0.5s}
.u-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(89,89,91,.50);opacity:0;visibility:hidden;transition:0.5s all}
.m-mobile-menu .a-link-262{display:none!important}
.m-menu-open .u-overlay{opacity:1;visibility:visible;z-index:2}
.m-menu-open .content{overflow:hidden;height:100vh}
.m-menu-open .m-mobile-menu{opacity:1;visibility:visible;z-index:5000;-ms-transform:translateY(0);-o-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}
.u-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(89, 89, 91, .50); opacity: 0; visibility: hidden; transition: 0.5s all; }
.m-menu-open .u-overlay { opacity: 1; visibility: visible; z-index: 2; }

javascript是:

$('.js-toggle-menu').on("click", function(e){
    e.preventDefault();
    $('body').addClass('m-menu-open');
  });
  $('.js-close-menu').on("click", function(e){
    e.preventDefault();
    $('body').removeClass('m-menu-open');
    $('.m-mobile-menu .mobile-menu').css({
      '-webkit-transform' : 'translateX( 0 )',
      '-moz-transform'    : 'translateX( 0 )',
      '-ms-transform'     : 'translateX( 0 )',
      '-o-transform'      : 'translateX( 0 )',
      'transform'         : 'translateX( 0 )'
    }).attr('transform', 0);
  });
  $('.js-mobile-menu .js-back-child-menu').on("click", function(e){
    e.preventDefault();
    var transform = $('.m-mobile-menu .mobile-menu').attr('transform') - 100;
    $('.m-mobile-menu .mobile-menu').css({
      '-webkit-transform' : 'translateX( -' + transform + '% )',
      '-moz-transform'    : 'translateX( -' + transform + '% )',
      '-ms-transform'     : 'translateX( -' + transform + '% )',
      '-o-transform'      : 'translateX( -' + transform + '% )',
      'transform'         : 'translateX( -' + transform + '% )'
    }).attr('transform', transform);
    $(this).parent().parent().removeClass('is-open');       
  });
  $('.js-mobile-menu .js-open-child-menu').on("click", function(e){
    e.preventDefault();
    var transform = $(this).parent().attr('transform');
    $(this).parent().find('.m-main-menu-child').first().addClass('is-open');
    $(".m-main-menu-child, .m-mobile-menu").animate({ scrollTop: 0 }, 0);
    $('.m-mobile-menu .mobile-menu').css({
      '-webkit-transform' : 'translateX( -' + transform + '% )',
      '-moz-transform'    : 'translateX( -' + transform + '% )',
      '-ms-transform'     : 'translateX( -' + transform + '% )',
      '-o-transform'      : 'translateX( -' + transform + '% )',
      'transform'         : 'translateX( -' + transform + '% )'
    }).attr('transform', transform);        
  });
  $('.js-trigger-sub-menu').click(function(){
    $('.m-submenu').toggleClass('a-active');
  });
  $('.js-no-link').on('click',function(e){
    e.preventDefault();
  });

0 个答案:

没有答案