CSS定位-mobilemenubar

Question

我在项目中遇到了一个我不明白也不知道如何解决的问题。我正在设计一个网站的移动菜单。该问题仅发生在移动菜单中，因此要重现该问题，最大 window 宽度需要 <1023。

可以按预期使用右上角的汉堡图标展开菜单。菜单工作正常但是当菜单没有展开时，在一些随机位置的菜单栏上，（只需将鼠标悬停在绿色区域上就可以轻松找到它们）光标变成指针并单击启动菜单项（不可见而且我不知道为什么可以点击它）

为了更容易定位问题，我将重要的代码行提取到此代码笔中：https://codepen.io/bvonr/pen/rNMEpqZ

(function(){
    var burger = document.querySelector('.burger-container'),
        header = document.querySelector('.header');
    
    burger.onclick = function() {
        header.classList.toggle('menu-opened');
        menu-item.classList.toggle('activemenu');
    }
}());

/*Header generell */

.header {
  width: 100%;
  background: #24603c;
  z-index: 2;
}

/* Mobiles Menü */
@media (max-width: 1023px) {

.header {
         background: #24603c;
     height: 50px;
     width: 100%;
     overflow: hidden;
     transition: all 0.5s ease-out, background 1s ease-out;
     transition-delay: 2.2s;
     z-index: 1;
}
.header > a {
  height: 50px;
}
.header > a > img {
  height: 50px;
}

.header .burger-container {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50px;
  cursor: pointer;
  transform: rotate(0deg);
  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.header .burger-container #burger {
  width: 18px;
  height: 8px;
  position: relative;
  display: block;
  margin: -4px auto 0;
  top: 50%;
}
.header .burger-container #burger .bar {
  width: 100%;
  height: 1px;
  display: block;
  position: relative;
  background: #fff;
  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition-delay: 0s;
}
.header .burger-container #burger .bar.topBar {
  transform: translateY(0px) rotate(0deg);
}
.header .burger-container #burger .bar.btmBar {
  transform: translateY(6px) rotate(0deg);
}

.header {
  right: 0;
  top: 0;
  left: auto;
  transform: translateX(0px);
  transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition-delay: 0.65s;
}
.header ul.menu {
  position: relative;
  display: block;
  padding: 0px 48px 0;
  list-style: none;
}
.burger-container {
  width: 50px;
  float: right;
}
.header ul.menu li.menu-item {
  border-bottom: 1px solid #fff;
  margin-top: 5px;
  transform: scale(1.15) translateY(-30px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}

.header ul.menu li.menu-item:nth-child(1) {
  transition-delay: 0.49s;
}
.header ul.menu li.menu-item:nth-child(2) {
  transition-delay: 0.42s;
}
.header ul.menu li.menu-item:nth-child(3) {
  transition-delay: 0.35s;
}
.header ul.menu li.menu-item:nth-child(4) {
  transition-delay: 0.28s;
}
.header ul.menu li.menu-item:nth-child(5) {
  transition-delay: 0.21s;
}
.header ul.menu li.menu-item:nth-child(6) {
  transition-delay: 0.14s;
}
.header ul.menu li.menu-item:nth-child(7) {
  transition-delay: 0.07s;
}

.header ul.menu li.menu-item a {
  display: block;
  position: relative;
  color: #fff !important;
  font-weight: 100;
  text-decoration: none;
  font-size: 22px;
  line-height: 2.35;
  font-weight: 200;
  width: 100%;
}
.header.menu-opened {
  height: 100%;
  background-color: #24603c;
  transition: all 0.3s ease-in, background 0.5s ease-in;
  transition-delay: 0.25s;
}
.header.menu-opened .burger-container {
  transform: rotate(90deg);
}
.header.menu-opened .burger-container #burger .bar {
  transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition-delay: 0.2s;
}
.header.menu-opened .burger-container #burger .bar.topBar {
  transform: translateY(4px) rotate(45deg);
}
.header.menu-opened .burger-container #burger .bar.btmBar {
  transform: translateY(3px) rotate(-45deg);
}
.header.menu-opened ul.menu li.menu-item {
  transform: scale(1) translateY(0px);
  opacity: 1;
}
.header.menu-opened ul.menu li.menu-item:nth-child(1) {
  transition-delay: 0.27s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(2) {
  transition-delay: 0.34s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(3) {
  transition-delay: 0.41s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(4) {
  transition-delay: 0.48s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(5) {
  transition-delay: 0.55s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(6) {
  transition-delay: 0.62s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(7) {
  transition-delay: 0.69s;
}

}

<div class="header">
  <a href="?module=start"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Logo%21_Logo.svg/1920px-Logo%21_Logo.svg.png"></a>
    <div class="burger-container">
      <div id="burger">
        <div class="bar topBar"></div>
        <div class="bar btmBar"></div>
      </div>
    </div>


<ul class="menu">

  <li class="menu-item">
    <a href="?module=start">CLUB</a>


    <ul class="menulist">
       <li class="menulevel1">
        <a class=" " href="Ueber-Uns">ÜBER UNS</a>
       </li>
    </ul>


  </li>

  <li class="menu-item">
     <a href="Hockey">HOCKEY</a>


     <ul class="menulist">
         <li class="menulevel1">
           <a class=" " href="Ueber-Uns">ÜBER UNS</a>
         </li>
      </ul>


</li>

<li class="menu-item">
  <a href="Tennis">TENNIS</a>


  <ul class="menulist">
      <li class="menulevel1">
         <a class=" " href="Ueber-Uns">ÜBER UNS</a>
      </li>
  </ul>


</li>

<li class="menu-item">
  <a href="https://www.youtube.com/channel/UCDujF-QJ9YYeBxCHsFtz9Cg" target="_new">UHLEN.TV</a>


  <ul class="menulist">
     <li class="menulevel1">
        <a class=" " href="Ueber-Uns">ÜBER UNS</a>
     </li>
  </ul>


</li>

<li class="menu-item">
  <a href="?module=profile">MY.HTCU</a>


  <ul class="menulist">
       <li class="menulevel1">
          <a class=" " href="Ueber-Uns">ÜBER UNS</a>
       </li>
  </ul>


</li>

<li class="menu-item">
  <a href="?module=admin">ADMIN</a>


  <ul class="menulist">
      <li class="menulevel1">
          <a class=" " href="Ueber-Uns">ÜBER UNS</a>
      </li>
  </ul>


</li>

<li class="menu-item">
  <a href="tests">TESTSEITE</a>


  <ul class="menulist">
     <li class="menulevel1">
         <a class=" " href="Ueber-Uns">ÜBER UNS</a>
     </li>
  </ul>


</li>

 </ul>
</div>

如果有人知道为什么菜单项出现在那里以及我该如何解决这个问题，我将非常感谢您的帮助。

我正在为网站编写无薪代码，所以我远不是专家，如果有任何帮助，我将不胜感激。

Answer 1

原因是这一行...:[=21=]

transform: scale(1.15) translateY(-30px)

...在 .header ul.menu li.menu-item:nth-child(1)

的 CSS 规则中

或者更准确地说是那里的 translateY(-30px)，它将所有菜单链接向上移动 30 像素。

由于您使用 opacity: 0 隐藏了 li 元素，顶部 li 部分仍然存在；不可见，但可点击（即未被 header 上的 overflow: hidden 隐藏的部分）。

所以你应该在列表项上使用 display: none 而不是 opacity: 0（或者在整个 ul 上更好），或者避免使用 transform: translateY(-30px) 设置

CSS定位-mobilemenubar

CSS positioning - mobilemenubar

html

javascript

css

element

positioning