移动菜单无法打开

Question

我有一个菜单，我想通过更改顶部位置来隐藏/显示菜单。

我登录菜单之前看起来是这样的：

<div class="lc"> 
    <h1><a href="./"><img src="logo.png" /></a></h1> 
    <a href="#" id="menuBtn"></a> 
    <nav id="mainNav"> 
     <ul> 
      <li><a href="....php">...</a></li> 
      <li class="nav-li-..."><a href="....php">...</a></li> 
     </ul> 
    </nav> 
</div> 

我登录后，一些项目被添加：

<div class="lc"> 
    <h1><a href="./"><img src="logo.png" /></a></h1> 
    <a href="#" id="menuBtn"></a> 
    <nav id="mainNav"> 
     <ul> 
      <li><a href="....php">...</a></li> 
      <li class="nav-li-..."><a href="....php">...</a></li> 
      <li class="nav-li-..."><a href="....php">...</a></li> 
      <li class="nav-li-..."><a href="....php">...</a></li> 
      <li class="nav-li-..."><a href="....php">...</a></li> 
      <li class="nav-li-..."><a href="....php">...</a></li> 
     </ul> 
     <div class="nav-admin"> 
      <strong>Administrator links:</strong><br /> 
      <a href="....php?users">...</a><br /> 
      <a href="....php?user_logs">...</a><br /> 
      <a href="....php?dealer_logs">...</a><br /> 
      <a href="....php?herd_logs">...</a><br /> 
      <a href="....php?php_logs">...</a> 
     </div> 
    </nav> 
</div> 

这个CSS属于它：

.lc, nav, h1 { 
    background: #fdf6bf; 
    background: #FDD; 
} 
.lc { 
    position: fixed; 
    z-index: 200; 
    width: 14em; 
    height: 100%; 
    top: 0; 
    left: 0; 
    padding-top: .5em; 
    overflow: auto; 
} 
    h1 { 
     width: 100%; 
     font-size: 1em; 
     margin-top: 0; 
     margin-bottom: .5em; 
    } 
     h1 a { 
      display: block; 
      width: 100%; 
      text-align: center; 
     } 
      h1 a img { max-width: 70%; } 

    nav ul { list-style: none; } 
    nav ul li { padding: .75em 0 .75em 4.25em; } 
    nav ul li.is-active { background: #fdf9dc; } 
    nav ul li.is-active a:after { 
     content: "\232A"; 
     position: absolute; 
     right: .25em; 
     top: -.05em; 
     font-size: 3em; 
     height: 1em; 
     line-height: 1em; 
     vertical-align: middle; 
     color: #c9c49d; 
    } 

    nav ul a, 
    .btn-add { 
     display: block; 
     position: relative; 
     height: 3em; 
     padding-left: 1em; 
     line-height: 3em; 
     vertical-align: middle; 
     font-family: 'Exo', sans-serif; 
     text-decoration: none; 
     color: #4f4e4c; 
     font-size: 1em; 
     font-weight: 600; 
    } 
     nav ul a:before, 
     .btn-add:before { 
      content: ''; 
      position: absolute; 
      right: 100%; 
      top: 50%; 
      margin-top: -1.75em; 
      width: 3.5em; 
      height: 3.5em; 
      background: url(images/menu_home.png) center center no-repeat; 
      background-size: cover; 
     } 

.nav-show { top: 0; } 
.no-scroll { overflow: hidden; } 

@media screen and (max-width: 550px) { 
    * { font-size: 1em; } 
    nav { 
     position: fixed; 
     z-index: 180; 
     top: -100%; 
     left: 0; 
     padding-top: 4.5em; 
     width: 100%; 
     height: 100%; 
     overflow: auto; 
     -webkit-transition: all 1s ease-in-out; 
     -moz-transition: all 1s ease-in-out; 
     -o-transition: all 1s ease-in-out; 
     transition: all 1s ease-in-out; 
     background: #fffad5; 
    } 
    nav ul li.is-active { background: #fffcea; } 

    .lc { 
     position: fixed; 
     width: 100%; 
     height: 3.5em; 
     overflow: hidden; 
    } 

触发我使用的菜单

$(function() { 
    $('#menuBtn').on('click', function(e) { 
     $('body').toggleClass('no-scroll'); 
     $('#mainNav').toggleClass('nav-show'); 
     e.preventDefault(); 
    }); 
}); 

问题是菜单在登录前显示。但之后，我无法打开菜单。这个问题不在桌面PC上，而只在手机上（Android）。我尝试过各种手机和浏览器，但它们都有同样的问题。

有人有想法吗？

Answer 1

看来，Android浏览器处理不同的固定位置，即Firefox。

特别是一个固定的div里面的固定div。
菜单没有显示，因为.lc只有3.5em高，并有隐藏溢出。所以通过切换一个额外的类.lc，使其扩大我解决了这个问题。

.lc-expand { max-height: 100%; } 

$('#menuBtn').on('click', function(e) { 
    $('body').toggleClass('no-scroll'); 
    $('.lc').toggleClass('lc-expand'); 
    $('#mainNav').toggleClass('nav-show'); 
    e.preventDefault(); 
}); 

Answer 2

您是否尝试在@media screen and (max-width: 550px) {中添加.nav-show { top: 0; }？

由于这.nav-show { top: 0; }的@media之前说...
的top:-100px住宿。

如果发现this answer可以肯定。
它很好解释。

问题是您的元素在@media AND top:0从.nav-show获取top: -100%从nav{。使用最后定义的。
;）

Answer 3

试试这个， 即使位置：固定的工作，但你需要添加一些PX顶部（即周围70像素），但这个隐藏您的其他链接。

@media screen and (max-width: 550px) { 
      * { font-size: 1em; } 
      nav { 
       position:relative; 
       padding-top: 4.5em; 
       width: 100%; 
       height: 100%; 
       -webkit-transition: all 1s ease-in-out; 
       -moz-transition: all 1s ease-in-out; 
       -o-transition: all 1s ease-in-out; 
       transition: all 1s ease-in-out; 
       background: #fffad5; 
      } 
      nav ul li.is-active { background: #fffcea; } 

      .lc { 
       position: fixed; 
       width: 100%; 
       height: 100%; 

      } 
}