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

Question

I am using swiper slider for my website and I encountered an issue with adding full-screen menu on each slide.

 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> 

A hamburger menu button is displayed only on the first slide even though is added on all of them.

When I click on it it won't open. When I use this menu outside of slide it works just fine.

Not sure what am I missing any tip appreciated!

Answer 1

Your menus have position:fixed , which positions them relative to their closest viewport. Normally, that's the <body> , but there are CSS properties which can cause an element to act as viewport for its children.

One such property is transform with any 3d transformation effect. Which is what's applied to your slider container. In this case, the slider container acts as a viewport to the menus, which all overlap.

A bad fix would be to apply a 3d inert transformation to each slide: transform: rotatez(0) . Example:

 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> 

Note you currently have duplicate ids which will make your jQuery behave unexpectedly, but that's a different issue, outside of the scope of this question. If you need help with that problem, post a different question about it.

---

The proper solution is to have one single menu placed outside of the slider. It will be displayed over your slider, hence over each slide. Unless your menus are different and specific to each particular slide, appending the site menu to each slide is something you want to avoid.

Good fix example:

 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> 

If you have specific menus for each slide, go with the "bad" fix, but make sure you fix your ids and jQuery to account for each button opening its respective menu.

Answer 2

You have to write overlay <div> s outside the swiper with different ids each.

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

so, swiper-container div remains like this

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

then, change the #toggle click function as follow

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

Answer for the comment "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>

Answer 3

You can try this code here

I am changing little code the hamburger button id to class because of the swiper slider regenerate your HTML on his won formate, so I changed the code document click.

 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> 

=== Thank you ===