小问题僵持手机菜单

我在为客户网站设计手机菜单方面做得很好，但有一些编码问题试图在手机菜单后面加上徽标部分和汉堡包按钮。小问题僵持手机菜单

所以当用户点击汉堡包按钮时，他们不会看到徽标部分和汉堡包按钮。

所以，我已经做了一个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

小问题僵持手机菜单

回答

相关问题