Fancy Stacked Card Menu With jQuery And CSS3

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.

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.

  • Publication date: 25.07.2018
  • Source