全屏菜单仅适用于滑块的第一张幻灯片，而不适用于其余部分 - CSS、HTML

Question

我在我的网站上使用滑动滑块，但在每张幻灯片上添加全屏菜单时遇到了问题。

var swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});


$('#toggle').click(function() {
  $(this).toggleClass('active');
  $('#overlay').toggleClass('open');
});

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}


/* Swiper */

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }




/* Menu */

.container.menu a:after {
  content: '';
  position: absolute;
  background: #FF5252;
  height: 2px;
  width: 0%;
  transform: translateX(-50%);
  left: 50%;
  bottom: 0;
  transition: .35s ease;
}

.container.menu a:hover:after {
  width: 100%;
}

h1 {
  position: relative;
  text-align: center;
}

.button_container {
  position: fixed;
  top: 5%;
  right: 2%;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  transition: opacity .25s ease;
}

.button_container:hover {
  opacity: .7;
}

.button_container.active .top {
  transform: translateY(10px) translateX(0) rotate(45deg);
  background: #FFF;
}

.button_container.active .middle {
  opacity: 0;
  background: #FFF;
}

.button_container.active .bottom {
  transform: translateY(-10px) translateX(0) rotate(-45deg);
  background: #FFF;
}

.button_container span {
  background: #FF5252;
  border: none;
  height: 3px;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  transition: all .35s ease;
  cursor: pointer;
}

.button_container span:nth-of-type(2) {
  top: 10px;
}

.button_container span:nth-of-type(3) {
  top: 20px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, width .35s;
  z-index: 50;
}

.overlay:before {
  content: '';
  background: #FF5252;
  left: -55%;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  transition: left .35s ease;
}

.overlay:after {
  content: '';
  background: #FF5252;
  right: -55%;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  transition: all .35s ease;
}

.overlay.open {
  opacity: .9;
  visibility: visible;
  height: 100%;
}

.overlay.open:before {
  left: 0;
}

.overlay.open:after {
  right: 0;
}

.overlay.open li {
  animation: fadeInRight .5s ease forwards;
  animation-delay: .35s;
}

.overlay.open li:nth-of-type(2) {
  animation-delay: .45s;
}

.overlay.open li:nth-of-type(3) {
  animation-delay: .55s;
}

.overlay.open li:nth-of-type(4) {
  animation-delay: .65s;
}

.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  font-family: 'Vollkorn', serif;
  font-weight: 400;
  text-align: center;
  z-index: 100;
}

.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}

.overlay ul li {
  display: block;
  height: 25%;
  height: calc(100% / 4);
  min-height: 50px;
  position: relative;
  opacity: 0;
}

.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
}

.overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
  width: 100%;
}

.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  transition: .35s;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
  .navbar-brand {
    color: white;
    font-size: 1.75rem !important;
  }
  nav li {
    padding: 10px;
    font-weight: 400;
    font-size: 1rem;
  }
  nav li a:hover {
    color: black;
  }
  nav .nav-link {
    color: white;
  }

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      Slide 1
    </div>
    <div class="swiper-slide">
      Slide 2
      <div class="button_container" id="toggle">
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
      </div>

      <div class="overlay" id="overlay">
        <nav class="overlay-menu">
          <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
            <li><a href="#">Four</a></li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="swiper-slide">
      Slide 3
      <div class="button_container" id="toggle">
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
      </div>

      <div class="overlay" id="overlay">
        <nav class="overlay-menu">
          <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
            <li><a href="#">Four</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>

  <div class="swiper-pagination"></div>

  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

汉堡包菜单按钮仅显示在第一张幻灯片上，即使在所有幻灯片上都已添加。

当我点击它时它打不开。当我在幻灯片之外使用此菜单时，它工作正常。

不知道我错过了什么任何提示感谢！

Answer 1

您的菜单有 position:fixed，它们相对于最近的视口定位。通常，这是 <body>，但有 CSS 属性可以使元素充当其子元素的视口。

其中一个属性是 transform 具有任何 3d 变换效果。这是应用于您的滑块容器的内容。在这种情况下，滑块容器充当所有重叠菜单的视口。

一个不好的解决方法是对每张幻灯片应用 3d 惰性变换：transform: rotatez(0)。示例：

var swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});


$('#toggle').click(function() {
  $(this).toggleClass('active');
  $('#overlay').toggleClass('open');
});

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}


/* Swiper */

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}


/* Menu */

.container.menu a:after {
  content: '';
  position: absolute;
  background: #FF5252;
  height: 2px;
  width: 0%;
  transform: translateX(-50%);
  left: 50%;
  bottom: 0;
  transition: .35s ease;
}

.container.menu a:hover:after {
  width: 100%;
}

h1 {
  position: relative;
  text-align: center;
}

.button_container {
  position: fixed;
  top: 5%;
  right: 2%;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  transition: opacity .25s ease;
}

.button_container:hover {
  opacity: .7;
}

.button_container.active .top {
  transform: translateY(10px) translateX(0) rotate(45deg);
  background: #FFF;
}

.button_container.active .middle {
  opacity: 0;
  background: #FFF;
}

.button_container.active .bottom {
  transform: translateY(-10px) translateX(0) rotate(-45deg);
  background: #FFF;
}

.button_container span {
  background: #FF5252;
  border: none;
  height: 3px;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  transition: all .35s ease;
  cursor: pointer;
}

.button_container span:nth-of-type(2) {
  top: 10px;
}

.button_container span:nth-of-type(3) {
  top: 20px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, width .35s;
  z-index: 50;
}

.overlay:before {
  content: '';
  background: #FF5252;
  left: -55%;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  transition: left .35s ease;
}

.overlay:after {
  content: '';
  background: #FF5252;
  right: -55%;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  transition: all .35s ease;
}

.overlay.open {
  opacity: .9;
  visibility: visible;
  height: 100%;
}

.overlay.open:before {
  left: 0;
}

.overlay.open:after {
  right: 0;
}

.overlay.open li {
  animation: fadeInRight .5s ease forwards;
  animation-delay: .35s;
}

.overlay.open li:nth-of-type(2) {
  animation-delay: .45s;
}

.overlay.open li:nth-of-type(3) {
  animation-delay: .55s;
}

.overlay.open li:nth-of-type(4) {
  animation-delay: .65s;
}

.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  font-family: 'Vollkorn', serif;
  font-weight: 400;
  text-align: center;
  z-index: 100;
}

.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}

.overlay ul li {
  display: block;
  height: 25%;
  height: calc(100% / 4);
  min-height: 50px;
  position: relative;
  opacity: 0;
}

.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
}

.overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
  width: 100%;
}

.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  transition: .35s;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
.swiper-slide {transform: rotatez(0)}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      Slide 1
      <div class="button_container" id="toggle">
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
      </div>

      <div class="overlay" id="overlay">
        <nav class="overlay-menu">
          <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
            <li><a href="#">Four</a></li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="swiper-slide">
      Slide 2
      <div class="button_container" id="toggle">
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
      </div>

      <div class="overlay" id="overlay">
        <nav class="overlay-menu">
          <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
            <li><a href="#">Four</a></li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="swiper-slide">
      Slide 3
      <div class="button_container" id="toggle">
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
      </div>

      <div class="overlay" id="overlay">
        <nav class="overlay-menu">
          <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
            <li><a href="#">Four</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>

  <div class="swiper-pagination"></div>

  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

请注意，您目前有重复的 ID，这会使您的 jQuery 出现意外行为，但这是一个不同的问题，超出了本问题的范围。如果您需要有关该问题的帮助，post 一个不同的问题。

正确的解决方案 是将一个菜单放在滑块之外。它将显示在您的滑块上，因此显示在每张幻灯片上。除非您的菜单不同并且特定于每张特定幻灯片，否则您要避免将站点菜单附加到每张幻灯片。

好的修复示例：

var swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

$('.toggle').click(function() {
  $('.toggle').removeClass('active');
  if (!$(this).closest('.overlay').is('div')) {
    $('.toggle', $('#overlay')).addClass('active');
  }
  $('#overlay').toggleClass('open');
});

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}


/* Swiper */

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}


/* Menu */

.container.menu a:after {
  content: '';
  position: absolute;
  background: #FF5252;
  height: 2px;
  width: 0%;
  transform: translateX(-50%);
  left: 50%;
  bottom: 0;
  transition: .35s ease;
}

.container.menu a:hover:after {
  width: 100%;
}

h1 {
  position: relative;
  text-align: center;
}

.button_container {
  position: fixed;
  top: 5%;
  right: 2%;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  transition: opacity .25s ease;
}

.button_container:hover {
  opacity: .7;
}
.button_container.active {
  z-index: 1;
}
.button_container.active .top {
  transform: translateY(10px) translateX(0) rotate(45deg);
  background: #FFF;
}

.button_container.active .middle {
  opacity: 0;
  background: #FFF;
}

.button_container.active .bottom {
  transform: translateY(-10px) translateX(0) rotate(-45deg);
  background: #FFF;
}

.button_container span {
  background: #FF5252;
  border: none;
  height: 3px;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  transition: all .35s ease;
  cursor: pointer;
}

.button_container span:nth-of-type(2) {
  top: 10px;
}

.button_container span:nth-of-type(3) {
  top: 20px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, width .35s;
  z-index: 50;
}

.overlay:before {
  content: '';
  background: #FF5252;
  left: -55%;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  transition: left .35s ease;
}

.overlay:after {
  content: '';
  background: #FF5252;
  right: -55%;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  transition: all .35s ease;
}

.overlay.open {
  opacity: .9;
  visibility: visible;
  height: 100%;
}

.overlay.open:before {
  left: 0;
}

.overlay.open:after {
  right: 0;
}

.overlay.open li {
  animation: fadeInRight .5s ease forwards;
  animation-delay: .35s;
}

.overlay.open li:nth-of-type(2) {
  animation-delay: .45s;
}

.overlay.open li:nth-of-type(3) {
  animation-delay: .55s;
}

.overlay.open li:nth-of-type(4) {
  animation-delay: .65s;
}

.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  font-family: 'Vollkorn', serif;
  font-weight: 400;
  text-align: center;
  z-index: 100;
}

.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}

.overlay ul li {
  display: block;
  height: 25%;
  height: calc(100% / 4);
  min-height: 50px;
  position: relative;
  opacity: 0;
}

.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
}

.overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
  width: 100%;
}

.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  transition: .35s;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
.swiper-slide {
  transform: rotatez(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div class="overlay" id="overlay">
  <div class="button_container toggle">
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
      </div>
  <nav class="overlay-menu">
    <ul>
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>
  </nav>
</div>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      Slide 1
    </div>
    <div class="swiper-slide">
      Slide 2
      <div class="button_container toggle">
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
      </div>
    </div>
    <div class="swiper-slide">
      Slide 3
      <div class="button_container toggle">
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
      </div>
    </div>
  </div>

  <div class="swiper-pagination"></div>

  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

如果每张幻灯片都有特定的菜单，请使用 "bad" 修复，但请确保修复您的 ID 和 jQuery 以说明每个按钮打开其各自的菜单。

Answer 2

你可以在这里试试这个代码

我正在将汉堡包按钮 ID 的小代码更改为 class，因为刷卡滑块会重新生成你的 HTML，所以我更改了代码文档点击。

var swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
$(document).on('click','.toggle',function() {
  $(this).toggleClass('active');
  $('#overlay').toggleClass('open');
});

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}


/* Swiper */

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}


/* Menu */

.container.menu a:after {
  content: '';
  position: absolute;
  background: #FF5252;
  height: 2px;
  width: 0%;
  transform: translateX(-50%);
  left: 50%;
  bottom: 0;
  transition: .35s ease;
}

.container.menu a:hover:after {
  width: 100%;
}

h1 {
  position: relative;
  text-align: center;
}

.button_container {
  position: fixed;
  top: 5%;
  right: 2%;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  transition: opacity .25s ease;
}

.button_container:hover {
  opacity: .7;
}

.button_container.active .top {
  transform: translateY(10px) translateX(0) rotate(45deg);
  background: #FFF;
}

.button_container.active .middle {
  opacity: 0;
  background: #FFF;
}

.button_container.active .bottom {
  transform: translateY(-10px) translateX(0) rotate(-45deg);
  background: #FFF;
}

.button_container span {
  background: #FF5252;
  border: none;
  height: 3px;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  transition: all .35s ease;
  cursor: pointer;
}

.button_container span:nth-of-type(2) {
  top: 10px;
}

.button_container span:nth-of-type(3) {
  top: 20px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, width .35s;
  z-index: 50;
}

.overlay:before {
  content: '';
  background: #FF5252;
  left: -55%;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  transition: left .35s ease;
}

.overlay:after {
  content: '';
  background: #FF5252;
  right: -55%;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  transition: all .35s ease;
}

.overlay.open {
  opacity: .9;
  visibility: visible;
  height: 100%;
}

.overlay.open:before {
  left: 0;
}

.overlay.open:after {
  right: 0;
}

.overlay.open li {
  animation: fadeInRight .5s ease forwards;
  animation-delay: .35s;
}

.overlay.open li:nth-of-type(2) {
  animation-delay: .45s;
}

.overlay.open li:nth-of-type(3) {
  animation-delay: .55s;
}

.overlay.open li:nth-of-type(4) {
  animation-delay: .65s;
}

.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  font-family: 'Vollkorn', serif;
  font-weight: 400;
  text-align: center;
  z-index: 100;
}

.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}

.overlay ul li {
  display: block;
  height: 25%;
  height: calc(100% / 4);
  min-height: 50px;
  position: relative;
  opacity: 0;
}

.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
}

.overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
  width: 100%;
}

.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  transition: .35s;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      Slide 1
      <div class="button_container" id="toggle">
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
      </div>

      <div class="overlay" id="overlay">
        <nav class="overlay-menu">
          <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
            <li><a href="#">Four</a></li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="swiper-slide">
      Slide 2
      <div class="button_container" id="toggle">
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
      </div>

      <div class="overlay" id="overlay">
        <nav class="overlay-menu">
          <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
            <li><a href="#">Four</a></li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="swiper-slide">
      Slide 3
      <div class="button_container toggle" onClick="getMe">
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
      </div>

      <div class="overlay" id="overlay">
        <nav class="overlay-menu">
          <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
            <li><a href="#">Four</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>

  <div class="swiper-pagination"></div>

  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

=== 谢谢===

Answer 3

您必须在滑动条外写 overlay <div>s，每个 ID 不同。

  <div class="button_container" id="toggle">
    <span class="top"></span>
    <span class="middle"></span>
    <span class="bottom"></span>
  </div>
 <div class="overlay" id="overlay0">
    <nav class="overlay-menu">
      <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
      </ul>
    </nav>
  </div>
  <div class="overlay" id="overlay1">
    <nav class="overlay-menu">
      <ul>
        <li><a href="#">Five</a></li>
        <li><a href="#">Six</a></li>
        <li><a href="#">Seven</a></li>
        <li><a href="#">Eight</a></li>
      </ul>
    </nav>
  </div> 
  <div class="overlay" id="overlay2">
    <nav class="overlay-menu">
      <ul>
        <li><a href="#">Nine</a></li>
        <li><a href="#">Ten</a></li>
        <li><a href="#">Eleven </a></li>
        <li><a href="#">Twelve</a></li>
      </ul>
    </nav>
  </div>

所以，swiper-container div 还是这样

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            Slide 1
        </div>
        <div class="swiper-slide">
            Slide 2
        </div>
        <div class="swiper-slide">
            Slide 3
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

然后，将#toggle点击功能改成如下

$('#toggle').click(function() {
    $(this).toggleClass('active');
    $('#overlay' + swiper.activeIndex).toggleClass('open');
});

评论的回答"Have just one more question if I don't want to display button just on first slide what should I do?"

<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  //////////// added
  on: {
    slideChange: function(){
        if(this.activeIndex == 0) $("#toggle").hide();
        else $("#toggle").show();
    }
  } //////////// added


});

$('#toggle').click(function() {
  $(this).toggleClass('active');
  $('#overlay'+swiper.activeIndex).toggleClass('open');
});

$("#toggle").hide();  //////////// added
</script>

全屏菜单仅适用于滑块的第一张幻灯片，而不适用于其余部分 - CSS、HTML

Full screen menu working just on first slide of slider not on the rest - CSS, HTML

html

javascript

css

swiper