全屏菜单仅在滑块的第一张幻灯片上起作用，而在其余部分上不起作用-CSS，HTML

时间：2019-05-02 07:31:45

标签： javascript html css swiper

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

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>

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

当我单击它时，它不会打开。当我在幻灯片之外使用此菜单时，效果很好。

不确定我错过了什么提示！

3 个答案:

答案 0 :(得分：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出现异常行为，但这是另一个问题，不在此问题的范围之内。如果您需要有关此问题的帮助，请发布有关此问题的其他问题。

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

好的修复示例：

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>

如果每张幻灯片都有特定的菜单，请进行“错误”修复，但请确保将id和jQuery修复为帐户中打开其相应菜单的每个按钮。

答案 1 :(得分：1)

您必须在刷卡器外写入overlay <div>，每个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');
});

回答“如果我不想只在第一张幻灯片上显示按钮，还有一个问题，我该怎么办？” 

<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>

答案 2 :(得分：0)

您可以在此处尝试此代码

我正在更改汉堡包按钮ID的小类代码，因为滑动滑块会在您赢得的队友上重新生成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>

===谢谢===

相关问题
最新问题