Question

我页面上的菜单无效，完全不可见。我把它设置在一个工作正常的codepen上但现在当我尝试实现它时，它无法工作。它在哪里？编码还是新手，但会很感激帮助。

HTML：

<body>
<nav class="menu-opener">
  <div class="menu-opener-inner"></div>
</nav>
<nav class="menu">
  <ul class="menu-inner">
    <a href="#" class="menu-link">
      <li>home.</li>
    </a>
    <a href="#" class="menu-link">
      <li>portfolio.</li>
    </a>
    <a href="#" class="menu-link">
      <li>about.</li>
    </a>
    <a href="#" class="menu-link">
      <li>contact.</li>
    </a>
  </ul>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(".menu-opener").click(function(){
  $(".menu-opener, .menu-opener-inner, .menu").toggleClass("active");
});
</script>
<div class="hero1">
<div id="hero1title"><h1>simplicity, craft and format <br>is what excites me as a designer</h1></div>
</div>
</body>

CSS：

html,body {
    padding:0;
    margin:0;
    height:100%
}

body {
    overflow:hidden
}

/*--Homepage*/

p.footertext {
    position:absolute;
    left:20px;
    bottom:10px;
    font-size:12px;
    z-index:1
}

@media only screen and (max-width : 400px) {
p.footertext {
    display:none
}
}
.hero1{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    background-color: rgb(247,200,198);
}
div #hero1title h1{
    color: white;
    font-size: 90pt;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 30%;
    text-align: center;
}

/* Menu styling*/



%transition {
  transition: 250ms all;
}

.menu-opener {
  background: none;
  cursor: pointer;
  height: 4rem;
  margin: 1rem;
  position: absolute;
  user-select: none;
  width: 4rem;
}
.menu-opener-inner {
  background: white;
  height: .5rem;
  margin-left: .75rem;
  margin-top: 1.75rem;
  width: 2.5rem;
  @extend %transition;
  &::before, &::after {
    background: white;
    content: '';
    display: block;
    height: 8px;
    width: 2.5rem;
    @extend %transition;
  }
  &::before {
    transform: translateY(-.75rem);
  }
  &::after {
    transform: translateY(.25rem);
  }
  &.active {
    background: transparent;
    &::before {
      transform: translateY(0rem) rotate(-45deg);
    }
    &::after {
      transform: translateY(-.5rem) translateX(-0rem) rotate(45deg)
    }
  }
}
.menu {
  background: rgb(152, 211, 189);
  height: 100%;
  position: absolute;
  top: 0px;
  user-select: none;
  width: 0rem;
  z-index: -1;
  @extend %transition;
  &.active {
    width: 100%;
    @extend %transition;
    & .menu-link {
      color: white;
    }
  }
}
.menu-inner {
  display: block;
  flex-direction: row;
  height: 450px;
  list-style-type: none;
  margin-top: 15%;
  padding: 0;
}
.menu-link {
  color: transparent;
  display: flex;
  flex: 1 1 auto;
  font-size: 70px;
  font-family: 'Calibre-Semibold';
  height: 25%;
  text-align: center;
  text-decoration: none;
  li {
    margin: auto;
  }
}

Answer 1

我将它全部放入小提琴中，我发现以下内容：

z-index不应为-1
它在那里。但你需要突出它才能看到它。
文字风格可怕，所以它看起来不那么好。
菜单列表中的文字颜色设置为＆＃34;透明＆＃34;。
你的HREF应该在＆＃34; li＆＃34;不在外面。

菜单不会显示或工作

1 个答案: