Полноэкранное меню работает только на первом слайде слайдера, а не на остальных - CSS, HTML - PullRequest
Новая
       14

Полноэкранное меню работает только на первом слайде слайдера, а не на остальных - CSS, HTML

0 голосов
/ 02 мая 2019

Я использую слайдер 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 ]

1 голос
/ 02 мая 2019

Вы должны написать overlay <div> s вне swiper с разными идентификаторами каждый. 

  <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>
1 голос
/ 02 мая 2019

Ваши меню имеют position:fixed, который позиционирует их относительно ближайшего окна просмотра. Обычно это <body>, но есть свойства CSS, которые могут заставить элемент действовать как область просмотра для его дочерних элементов.

Одним из таких свойств является transform с любым эффектом трехмерного преобразования. Это то, что применяется к вашему контейнеру слайдера. В этом случае контейнер слайдера действует как окно просмотра для меню, которые все перекрываются.

Плохим решением было бы применить 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>
Обратите внимание, что в настоящее время у вас есть дубликаты идентификаторов, которые приведут к тому, что ваш 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>

Если у вас есть определенные меню для каждого слайда, используйте «плохое» исправление, но убедитесь, что вы исправили свои идентификаторы и jQuery для учета каждой кнопки, открывающей соответствующее меню.

0 голосов
/ 02 мая 2019

Вы можете попробовать этот код здесь

Я немного изменяю код идентификатора кнопки гамбургера на класс, потому что ползунок swiper восстанавливает ваш 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>

=== Спасибо ===

...