Fancy Stacked Card Menu With jQuery And CSS3

Yet another card menu concept that allows the visitor to switch between stacked page sections by clicking the tabs triggered by a hamburger toggle button. Written in jQuery and CSS/CSS3.

How to use it:

1. Create the HTML for the card menu & sectioned pages.

<div class="wrapper">
  <div class="menu">
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
  <div class="page page1">
    <h2>Home</h2>
  </div>
  <div class="page page2">
    <h2>Category</h2>
  </div>
  <div class="page page3">
    <h2>Featued</h2>
  </div>
  <div class="page page4">
    <h2>About</h2>
  </div>
  <div class="page page5">
    <h2>Contact</h2>
  </div>
</div>

2. The basic CSS styles.

body {
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100vh;
}

.wrapper {
  width: 375px;
  height: 640px;
  background: #fff;
  box-shadow: 0 0 40px #dedede;
  position: relative;
  margin: 30px auto;
}

@media screen and (max-width: 567px) {
  .wrapper {
    width: 100%;
    height: 100%;
  }
}

3. The CSS styles for the sectioned pages.

.page {
  width: 100%;
  height: 100%;
  position: absolute;
  padding-top: 60px;
  cursor: pointer;
  text-align: center;
  color: #fff;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  transition: all 0.4s cubic-bezier(0.73, 0.08, 0.23, 1.41);
}

.page.top {
  z-index: 20;
}

.active-1 {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  padding-top: 25px;
}

.active-2 {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  padding-top: 25px;
}

.active-3 {
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  padding-top: 25px;
}

.active-4 {
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
  padding-top: 25px;
}

.active-5 {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  padding-top: 25px;
}

4. The CSS styles for hamburger menu.

.menu {
  width: 35px;
  height: 35px;
  background: #fff;
  position: absolute;
  top: 10px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  border-radius: 50%;
  z-index: 100;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.4s linear;
}

.menu .bar {
  width: 18px;
  height: 2px;
  background: #0017ff;
}

.menu .bar:first-child {
  margin-bottom: 5px;
}

.menu.open {
  background: #0017ff;
}

.menu.open .bar {
  background: #fff;
}

.menu.open .bar:first-child {
  -webkit-transform: translateY(3.5px) rotate(45deg);
  transform: translateY(3.5px) rotate(45deg);
}

.menu.open .bar:last-child {
  -webkit-transform: translateY(-3.5px) rotate(-45deg);
  transform: translateY(-3.5px) rotate(-45deg);
}

5. Insert the latest jQuery JavaScript library into the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>

6. The main JavaScript to activate the stacked card menu.

let btn = $('.menu');

let select = current => {
    btn.removeClass('open');
    $(current).addClass('top');
    for (let i = 1; i <= 5; i++)
        $(`.page${i}`).removeClass(`active-${i}`);
}

btn.on('click', () => {
    btn.toggleClass('open');
    for (let i = 1; i <= 5; i++)
        $(`.page${i}`).toggleClass(`active-${i}`).removeClass('top');

    $('.page1').on('click', () => {
        select('.page1');
    });

    $('.page2').on('click', () => {
        select('.page2');
    });

    $('.page3').on('click', () => {
        select('.page3');
    });

    $('.page4').on('click', () => {
        select('.page4');
    });

    $('.page5').on('click', () => {
        select('.page5');
    });
});

---

This awesome jQuery plugin is developed by prvnbist. For more Advanced Usages, please check the demo page or visit the official website.