小問題僵持手機菜單

我在爲客戶網站設計手機菜單方面做得很好，但有一些編碼問題試圖在手機菜單後面加上徽標部分和漢堡包按鈕。小問題僵持手機菜單

所以當用戶點擊漢堡包按鈕時，他們不會看到徽標部分和漢堡包按鈕。

所以，我已經做了一個z-index的，但不起作用。這裏有一個鏈接到一個網站，所以重新調整你的屏幕大小，看看菜單，並沒有任何javascript & jquery現在添加到網站。

站點預覽： https://brandonpowell.github.io/alegacyleftbehind/

@media (max-width: 480px){ 
    nav{ 
    height:100%; 
    width:100% 
    } 
    nav .bottom-navbar{ 
     background-color:#212121 
    } 
    nav .bottom-navbar .logo{ 
     position:absolute 
    } 
    nav .bottom-navbar .bt-close{ 
     position:absolute; 
     background-color:#51237f; 
     padding:9px; 
     display:block; 
     top:0; 
     width:100% 
     } 
     nav .bottom-navbar .bt-close .close-image{ 
     width:50px; 
     padding:10px; 
     float:right; 
     } 
     nav .bottom-navbar .bt-close .main-title{ 
      color:white; 
      padding:20px 10px; 
      text-transform:uppercase; 
      font-size:13pt;font-family:Montserrat,sans-serif; 
      letter-spacing:1px 
      } 
      nav .bottom-navbar .nav-menu{ 
      display:block;width:34px;margin:36px;float:right 
      } 
      nav ul li{ 
      float:none; 
      display:block; 
      letter-spacing:1px; 
      padding:1.9em 15px; 
      border-bottom:2px solid #2e2e2e;width:100% 
      } 
      nav ul li a{ 
       color:white; 
       font-size:1.6em 
       } 
       li:hover{ 
       background-color:#2e2e2e; 
       text-decoration:none; 
       color:#ffffff 
       } 
       ul{ 
       padding-left:0px; 
       margin:0; 
       } 

}

來源

2016-12-06 Brandon Powell

你有沒有考慮改變其不透明度爲0，並設置其指針事件無不是試圖隱藏菜單後面的？

在視覺上它會有相同的效果，並且可以通過向兩者添加類來使用jQuery觸發。該類的CSS代碼可能是：

.hidestuff{ 
opacity:0; 
pointer-events:none; 
}

一旦你刪除這個類，他們將回到可見和點擊。這有額外的好處，允許他們淡入和淡出使用CSS轉換。

安迪

來源

2016-12-06 01:02:56 AndrewIanHalloway

沒有，我還沒有想過這樣做可以解釋更好一點給我，討好他還學習jQuery或可以鏈接的教程。 –

w3學校在這裏有一個很好的教程：http://www.w3schools.com/howto/howto_js_topnav.asp – AndrewIanHalloway

小問題僵持手機菜單

回答

相關問題