时间戳

首页 > 解决方案 > CSS 定位 - mobilemenubar

javascript - CSS 定位 - mobilemenubar

问题描述

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

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

为了更容易定位问题，我将代码的重要行提取到此 codepen：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>

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

我正在编写无薪网站的代码，因此我远非专家，希望能提供任何帮助。

标签： javascripthtmlcsselementpositioning

解决方案

原因是这一行......：

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

...在 CSS 规则中.header ul.menu li.menu-item:nth-child(1)

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

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

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

推荐阅读