2016-07-02 76 views
0

我有一個菜單,我想通過更改頂部位置來隱藏/顯示菜單。移動菜單無法打開

我登錄菜單之前看起來是這樣的:

<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)。我嘗試過各種手機和瀏覽器,但它們都有同樣的問題。

有人有想法嗎?

回答

0

看來,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(); 
}); 
0

您是否嘗試在@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{。使用最後定義的。
;)

+0

雖然你是正確的,這並沒有解決問題。 – LinkinTED

0

試試這個, 即使位置:固定的工作,但你需要添加一些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%; 

      } 
} 
+0

將它改爲相對或絕對位置沒有區別......感謝努力! – LinkinTED

+0

@LinkinTED歡迎和錯誤解決好了。 – frnt

+0

錯誤沒有得到解決...... – LinkinTED