汉堡全屏菜单

Question

我有以下带有动画的“汉堡菜单”。

<div class="menu">
    <div class="menu-row row">
      <button class="hamburger-toggle">
        <span class="hamburger-menu">
          <span class="line line--top"></span>
          <span class="line line--middle"></span>
          <span class="line line--bottom"></span>
        </span>
      </button>
    </div>
  </div>


    <div class="offcanvas">
      <nav class="offcanvas-nav">
        <ul class="offcanvas-nav__list">
          <li class="offcanvas-nav__item">
            <a href="#" class="offcanvas-nav__link">Home</a>
          </li>

          <li class="offcanvas-nav__item">
            <a href="#" class="offcanvas-nav__link">About</a>
          </li>

          <li class="offcanvas-nav__item">
            <a href="#" class="offcanvas-nav__link">Portfolio</a>
          </li>

          <li class="offcanvas-nav__item">
              <a href="#" class="offcanvas-nav__link">Contact</a>
            </li>
        </ul>
      </nav>
    </div>

    <div class="toggle-circle">
      <div class="row">
        <svg class="hamburger-toggle__circle" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
          <circle cx="16" cy="16" r="16"/>
        </svg>
      </div>
    </div>

  
  
    <div class="content">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu lobortis leo, in imperdiet justo. Vivamus congue dui neque, id mollis nulla congue in. Nulla dictum aliquam arcu quis varius. Integer sit amet pulvinar ex. Phasellus consectetur dignissim ligula consequat suscipit. Mauris magna ante, pretium at faucibus ac, venenatis eu metus. Etiam euismod mi vel ipsum laoreet ultricies a at mauris. Nam eu pharetra odio, ac ullamcorper est. Integer velit justo, porta quis vulputate sed, pellentesque eget enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce varius lorem vitae eros rhoncus, sed blandit nibh mattis. Maecenas semper scelerisque nisl sed sollicitudin. Pellentesque convallis pulvinar massa, in congue odio efficitur et. In scelerisque bibendum nibh, a convallis risus tristique at. Fusce a posuere lorem. Nam gravida risus a venenatis pretium.

Nam elit massa, vulputate id quam in, consequat vestibulum dolor. Aenean malesuada finibus arcu a finibus. Proin iaculis aliquam porttitor. Pellentesque consectetur ante eget urna lobortis, quis consectetur elit sollicitudin. Praesent quam felis, pharetra at elementum vitae, ornare nec nisi. Vestibulum et ornare purus. Morbi eu purus eleifend, placerat lacus ac, auctor ante. Vivamus euismod metus at quam semper posuere. Sed interdum eleifend justo. Morbi sit amet tempor massa, vel aliquet ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eleifend dui in velit varius sollicitudin. Mauris cursus nisl ut nunc pellentesque, non efficitur ante ultrices. Mauris id elit pharetra, pharetra orci non, ultrices justo. Vivamus congue eget metus nec aliquam. Ut suscipit purus sit amet lectus facilisis, vitae porttitor tortor maximus.
                                        
                                </div>

我做错了什么菜单项不可见？我尝试了不同的“z-index”值，但似乎不起作用？谢谢..

Answer 1

您已将 z-index 添加到 body、
您的汉堡菜单应该是最高的 z-index，其次是叠加层 .offcanvas

添加这个

.menu {
  z-index: 2;
}

.has-offcanvas .offcanvas {
  z-index: 1;
}

这是工作 fiddle

汉堡全屏菜单

Hamburger fullscreen menu

css

jquery

hamburger-menu