css 当我给菜单添加了移动功能后，菜单中的所有按钮都停止工作了

fd3cxomn  于 5个月前  发布在  其他
关注(0)|答案(2)|浏览(56)

所以我做了一个网站，并添加了一个菜单，但当我试图添加关闭菜单按钮，所有的菜单按钮停止工作这里是HTML

<div id="openMenuButton">
      <span style= "font-size:30px;cursor:pointer"
        onclick="openMenu()">&#9776; Menu
      </span>
    </div>
        <div id="menu">
        <div id="closebtn">
          <span style= "font-size:36px;cursor:pointer"
            onclick="closeMenu()">&times; Close
          </span>
        </div>
          <div id="menu-items">
              <a href="/" class="menu-item">Home</a>
              <a href="games/" class="menu-item">Games</a>
              <a href="/" class="menu-item">About</a>
              <a href="/" class="menu-item">Contact Us</a>
          </div>
          <div id="menu-background-pattern"></div>
      </div>

字符串
现在CSS

body {
  background-color: rgb(20, 20, 20);
  margin: 0px;
}

#menu {
  height:100%;
  width: 0;
  position: fixed;
  background-color: rgb(20, 20, 20);
  z-index: 3;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  transition: cubic-bezier(0.6, 0, 0.4, 1);
  transition-duration: 2s;
}

#openMenuButton {
  right: 25px;
  color: white;
  z-index: 0;
}

#closebtn {
  color: white;
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#menu-items {
  margin-left: clamp(4rem, 20vw, 48rem);
  position: relative;
  z-index: 4;
}

#menu-items:hover > .menu-item {
  opacity: 0.3;
}

#menu-items:hover > .menu-item:hover {
  opacity: 1;
}

.menu-item {
  color: white;
  font-size: clamp(3rem, 8vw, 8rem);
  font-family: "Ibarra Real Nova", serif;

  display: block;
  text-decoration: none;
  padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
  transition: opacity 400ms ease;
}

#menu-background-pattern {
  height: 100vh;
  width: 100vw;

  background-image: radial-gradient(
    rgba(255, 255, 255, 0.1) 9%,
    transparent 9%
  );
  background-position: 0% 0%;
  background-size: 12vmin 12vmin;

  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 5;

  transition: opacity 800ms ease,
    background-size 800ms ease;
}

#menu-items:hover ~ #menu-background-pattern {
  background-size: 11vmin 11vmin;
  opacity: 0.5;
}

型
最后的JS

function openMenu() {
  document.getElementById("menu").style.width = "100%";
}

function closeMenu() {
  document.getElementById("menu").style.width = "0";
}

型
我试着改变CSS和HTML中的一些东西，但它仍然不起作用，使它更bug，所以我摆脱了变化。

css

2条答案

按热度按时间
a1o7rhls

a1o7rhls1#

问题出在你的css上。
您将#menu-background-pattern的z索引设为5。因此，这将覆盖#closebtn。
可以将大于#menu-background-pattern的z索引的z索引添加到#closebtn
我在你的代码中尝试过了，它工作了。请检查下面写的代码（你的代码，刚刚更新了z索引）

function openMenu() {
      
      document.getElementById("menu").style.width = "100%";
    }
    
    function closeMenu() {
      document.getElementById("menu").style.width = "0";
    }
body {
  background-color: rgb(20, 20, 20);
  margin: 0px;
}

#menu {
  height: 100%;
  width: 0;
  position: fixed;
  background-color: rgb(20, 20, 20);
  z-index: 3;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  transition: cubic-bezier(0.6, 0, 0.4, 1);
  transition-duration: 2s;
}

#openMenuButton {
  right: 25px;
  color: white;
  z-index: 0;
}

#closebtn {
  color: white;
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  z-index:9
}

#menu-items {
  margin-left: clamp(4rem, 20vw, 48rem);
  position: relative;
  z-index: 4;
}

#menu-items:hover>.menu-item {
  opacity: 0.3;
}

#menu-items:hover>.menu-item:hover {
  opacity: 1;
}

.menu-item {
  color: white;
  font-size: clamp(3rem, 8vw, 8rem);
  font-family: "Ibarra Real Nova", serif;
  display: block;
  text-decoration: none;
  padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
  transition: opacity 400ms ease;
}

#menu-background-pattern {
  height: 100vh;
  width: 100vw;
  background-image: radial-gradient( rgba(255, 255, 255, 0.1) 9%, transparent 9%);
  background-position: 0% 0%;
  background-size: 12vmin 12vmin;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 0;
  transition: opacity 800ms ease, background-size 800ms ease;
}

#menu-items:hover~#menu-background-pattern {
  background-size: 11vmin 11vmin;
  opacity: 0.5;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
 
  <body>
     <div id="openMenuButton">
      <span style= "font-size:30px;cursor:pointer"
        onclick="openMenu()">&#9776; Menu
      </span>
    </div>
        <div id="menu">
        <div id="closebtn">
          <span style= "font-size:36px;cursor:pointer"
            onclick="closeMenu()">&times; Close
          </span>
        </div>
          <div id="menu-items">
              <a href="/" class="menu-item">Home</a>
              <a href="games/" class="menu-item">Games</a>
              <a href="/" class="menu-item">About</a>
              <a href="/" class="menu-item">Contact Us</a>
          </div>
          <div id="menu-background-pattern"></div>
      </div>
  </body>
 
</html>

。
只是一个建议，如果你添加一些webkit风格的滚动条，这将是伟大的

赞(0）分享  回复(0）举报  5个月前
qkf9rpyu

qkf9rpyu2#

这里有一个潜在的修复方法。我已经将z-index属性更改为零，它覆盖了菜单项。

function openMenu() {
  document.getElementById("menu").style.width = "100%";
}

function closeMenu() {
  document.getElementById("menu").style.width = "0";
}
body {
  background-color: rgb(20, 20, 20);
  margin: 0px;
}

#menu {
  height: 100%;
  width: 0;
  position: fixed;
  background-color: rgb(20, 20, 20);
  z-index: 3;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  transition: cubic-bezier(0.6, 0, 0.4, 1);
  transition-duration: 2s;
}

#openMenuButton {
  right: 25px;
  color: white;
  z-index: 0;
}

#closebtn {
  color: white;
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#menu-items {
  margin-left: clamp(4rem, 20vw, 48rem);
  position: relative;
  z-index: 4;
}

#menu-items:hover>.menu-item {
  opacity: 0.3;
}

#menu-items:hover>.menu-item:hover {
  opacity: 1;
}

.menu-item {
  color: white;
  font-size: clamp(3rem, 8vw, 8rem);
  font-family: "Ibarra Real Nova", serif;
  display: block;
  text-decoration: none;
  padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
  transition: opacity 400ms ease;
}

#menu-background-pattern {
  height: 100vh;
  width: 100vw;
  background-image: radial-gradient( rgba(255, 255, 255, 0.1) 9%, transparent 9%);
  background-position: 0% 0%;
  background-size: 12vmin 12vmin;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 0;
  transition: opacity 800ms ease, background-size 800ms ease;
}

#menu-items:hover~#menu-background-pattern {
  background-size: 11vmin 11vmin;
  opacity: 0.5;
}
<div id="openMenuButton">
  <span style="font-size:30px;cursor:pointer" onclick="openMenu()">&#9776; Menu
          </span>
</div>
<div id="menu">
  <div id="closebtn">
    <span style="font-size:36px;cursor:pointer" onclick="closeMenu()">&times; Close
              </span>
  </div>
  <div id="menu-items">
    <a href="/" class="menu-item">Home</a>
    <a href="games/" class="menu-item">Games</a>
    <a href="/" class="menu-item">About</a>
    <a href="/" class="menu-item">Contact Us</a>
  </div>
  <div id="menu-background-pattern"></div>
</div>
赞(0）分享  回复(0）举报  5个月前
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com