html - 设置移动菜单的小问题

Question

我在为客户网站设计移动菜单样式方面做得很好，但在尝试将 Logo 部分和汉堡包按钮置于移动菜单后面时遇到了一些编码问题。

因此，当用户点击汉堡包按钮时，他们不会看到 Logo 部分和汉堡包按钮。

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

}

Answer 1

您是否考虑过将它们的不透明度更改为 0 并将它们的指针事件设置为无，而不是试图将它们隐藏在菜单后面？

在视觉上它会产生相同的效果，并且可以通过向两者添加一个类来使用 jQuery 触发。该类的 CSS 代码可以是:

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

删除此类后，它们将恢复可见和可点击状态。这具有允许它们使用 CSS 转换淡入和淡出的额外好处。

安迪