Question

我的汉堡菜单在较小的屏幕尺寸上会遮挡徽标的一部分，我不确定如何修复它，以便在单击菜单之前将徽标显示在菜单的前面。 This is what I mean.

我尝试将 label .menu 的背景设置为透明，但是在单击菜单后出现了徽标。 I'm talking about this.

任何帮助将不胜感激。

此外，我知道我的代码很乱。稍后再解决，请不要判断凌乱的代码。

.logo {
  position: fixed;
  width: 100%;
  top: -15px;
  height: auto;
  left: 50%;
  transform: translate(-50%);
}

.midnight-logo {
  width: 40%;
  margin: 0 auto;
  display: block;
}

label .hamburger {
  position: fixed;
  display: inline-block;
  top: 30px;
  left: 30px;
  width: 30px;
  height: 2px;
  display: block;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  background: #C8C8C8;
}

label .hamburger:after,
label .hamburger:before {
  transition: .5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #C8C8C8;
}

label .hamburger:before {
  top: -10px;
}

label .hamburger:after {
  bottom: -10px;
}

label input {
  display: none;
}

label input:checked+.menu {
  box-shadow: 0 0 0 100vw #000, 0 0 0 100vh #000;
  border-radius: 0;
}

label input:checked+.menu .hamburger {
  transform: rotate(45deg);
}

label input:checked+.menu .hamburger:after {
  transform: rotate(90deg);
  bottom: 0;
}

label input:checked+.menu .hamburger:before {
  transform: rotate(90deg);
  top: 0;
}

label input:checked+.menu+ul {
  display: block;
}

label .menu {
  position: fixed;
  top: -100px;
  z-index: 1;
  width: 100px;
  height: 155px;
  border-radius: 50% 50% 50% 50%;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 #000, 0 0 0 0 #000;
  cursor: pointer;
  background: #000;
}

label ul {
  z-index: 200;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  transition: .25s 0s ease-in-out;
  list-style-type: none;
  font-size: 40px;
  font-family: 'Tangerine', cursive;
}

label a {
  margin-bottom: 1em;
  display: block;
  text-decoration: none;
}

<img class="logo" src="https://i.ibb.co/xsQHR3Y/midnight-logo.png">

<label>

                <input type="checkbox">

                <span class="menu"> 
    
                <span class="hamburger"> </span> </span>

                    <ul> 
        
                        <li> <a href="home.html"> Home </a> </li> 
        
                        <li> <a href="about.html"> About </a> </li>
        
                        <li> <a href="contact.html"> Contact </a> </li>

                    </ul>

            </label>

Answer 1

尝试将这些编辑添加到CSS中的.logo类中：

z-index: 3; pointer-events: none;

这将使徽标从菜单上方开始。指针事件样式使菜单即使在徽标下也可以单击。但是，单击菜单后它将停留在顶部。

如果您不希望它停留在最前面，请在菜单中添加一些Javascript onclick事件。这样，当单击菜单时，徽标将还原为较低的z-index。类似于<span class="menu" onclick="logoBack()">。

然后在<script></script>标记之间放置一些Javascript。我在代码段中使用了下面的代码。希望这会有所帮助！

function logoBack() {
var logo = document.getElementsByClassName('logo')[0];
logo.style.zIndex = "0";
};

.logo {
  position: fixed;
  width: 100%;
  top: -15px;
  height: auto;
  left: 50%;
  transform: translate(-50%);
  z-index: 3;
  pointer-events: none;
}

.midnight-logo {
  width: 40%;
  margin: 0 auto;
  display: block;
}

label .hamburger {
  position: fixed;
  display: inline-block;
  top: 30px;
  left: 30px;
  width: 30px;
  height: 2px;
  display: block;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  background: #C8C8C8;
}

label .hamburger:after,
label .hamburger:before {
  transition: .5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #C8C8C8;
}

label .hamburger:before {
  top: -10px;
}

label .hamburger:after {
  bottom: -10px;
}

label input {
  display: none;
}

label input:checked+.menu {
  box-shadow: 0 0 0 100vw #000, 0 0 0 100vh #000;
  border-radius: 0;
}

label input:checked+.menu .hamburger {
  transform: rotate(45deg);
}

label input:checked+.menu .hamburger:after {
  transform: rotate(90deg);
  bottom: 0;
}

label input:checked+.menu .hamburger:before {
  transform: rotate(90deg);
  top: 0;
}

label input:checked+.menu+ul {
  display: block;
}


label .menu {
  position: fixed;
  top: -100px;
  z-index: 1;
  width: 100px;
  height: 155px;
  border-radius: 50% 50% 50% 50%;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 #000, 0 0 0 0 #000;
  cursor: pointer;
  background: #000;

}

label ul {
  z-index: 200;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  transition: .25s 0s ease-in-out;
  list-style-type: none;
  font-size: 40px;
  font-family: 'Tangerine', cursive;
}

label a {
  margin-bottom: 1em;
  display: block;
  text-decoration: none;
}

<DOCTYPE! HTML>
<head>
</head>

<body> 
<img class="logo" src="https://i.ibb.co/xsQHR3Y/midnight-logo.png">

<label>
                <input type="checkbox">

                <span class="menu" onclick="logoBack()"> 
    
                <span class="hamburger"> </span> </span>

                    <ul> 
        
                        <li> <a href="home.html"> Home </a> </li> 
        
                        <li> <a href="about.html"> About </a> </li>
        
                        <li> <a href="contact.html"> Contact </a> </li>

                    </ul>

            </label>
            
            </body>

            </html>

汉堡菜单涵盖徽标

1 个答案: