Fancy Stacked Card Menu With jQuery And CSS3
File Size: | 3.91 KB |
---|---|
Views Total: | 671 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.