(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Don’t want to make from scratch? Buy the template instead 🙂
Introduction – Full Screen Animated Menu with Elementor & GSAP
In this tutorial, we are learning to make simple and minimalistic menu that also looks modern with the animations. It is fully responsive and enhances your website by making it look more livelier.
Animated Hamburger Icon (Toggle between Open and Close Icon)
- Refer to this video to understand it better. (https://youtu.be/FzcW342IJ-c?t=202)
- Width in .menu-icon7 changes width of the hamburger icon.
- height in .menu-icon7 changes the distance between each line.
- height in .line7 changes the thickness of the each lines.
- .menu-wrapper7 contains the styling for background, padding, border etc.
- Each CSS class has an .active state, change the appropriate values for background, border etc.
<div class="menu-wrapper7" id="menu-wrapper7">
<div id="menu-icon7" class="menu-icon7">
<div class="line7 top7"></div>
<div class="line7 middle7"></div>
<div class="line7 bottom7"></div>
</div>
</div>
<style>
:root {
--dm-normal-delay: 0.5s;
--dm-active-delay: 0s;
--dm-menu-transition: 0.3s;
}
.menu-icon7 {
width: 30px;
height: 25px;
position: relative;
cursor: pointer;
transition: transform var(--dm-menu-transition) ease;
transition-delay: var(--dm-normal-delay);
}
.line7 {
width: 100%;
height: 5px;
background-color: black;
position: absolute;
transition: all var(--dm-menu-transition) ease;
transition-delay: var(--dm-normal-delay);
}
.top7 {
top: 0;
transition-delay: var(--dm-normal-delay);
}
.middle7 {
top: 50%;
transform: translateY(-50%);
transition-delay: var(--dm-normal-delay);
}
.bottom7 {
bottom: 0;
transition-delay: var(--dm-normal-delay);
}
.menu-wrapper7 {
padding: 10px;
/*border: 2px solid black;*/
transition: all var(--dm-menu-transition) ease;
/*background: white;*/
transition-delay: var(--dm-normal-delay);
}
.menu-wrapper7.active7 .menu-icon7 {
transform: rotate(360deg);
transition-delay: var(--dm-active-delay);
}
.menu-wrapper7.active7 .top7 {
transform: rotate(45deg);
top: 50%;
transform: translateY(-50%) rotate(45deg);
background-color: white;
transition-delay: var(--dm-active-delay);
}
.menu-wrapper7.active7 .middle7 {
opacity: 0;
transition-delay: var(--dm-active-delay);
}
.menu-wrapper7.active7 .bottom7 {
transform: rotate(-45deg);
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
background-color: white;
transition-delay: var(--dm-active-delay);
}
.menu-wrapper7.active7 {
padding: 10px;
/*border: 2px solid white;*/
transition-delay: var(--dm-active-delay);
/*background: black;*/
}
</style>
<script>
document.getElementById('menu-wrapper7').addEventListener('click', function() {
this.classList.toggle('active7');
});
</script>
Minimal Style Full Screen Menu Code – CSS and Javascript (JS)
- dm-menu-7-bg is the CSS of the parent container of all contents of menu.
- dm-menu-triple-toggle is the CSS class of the menu icon.
- dm-menu-title-7 is the CSS class of the menu titles (heading widget with p HTML tag).
- dm-menu-left-7 is the CSS class of the elements in the left container.
- dm-menu-right-7 is the CSS class of the elements in the right container.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.dm-menu-7-bg {
transition: none !important;
max-height: 100vh;
overflow-y:scroll;
/*Remove Display none when trying to edit*/
display: none;
}
.dm-menu-left-7 {
transition: none !important;
}
/*Removes transition added by Elementor on a links*/
.dm-menu-title-7 a {
transition: none !important;
}
.dm-menu-title-7 {
transition: letter-spacing 0.3s;
overflow: hidden;
}
.dm-menu-title-7:hover {
letter-spacing: 5px;
}
.dm-menu-right-7 {
transition: none !important;
}
/*Hides scrollbar in webkit browsers like chrome etc*/
.dm-menu-7-bg::-webkit-scrollbar {
width: 0px;
}
/*Hide scrollbar for firefox*/
.dm-menu-7-bg {
scrollbar-width: none;
}
</style>
<script>
const dmMenuIcon7 = document.querySelector('.dm-menu-triple-toggle');
const dmMenu7BG = document.querySelector('.dm-menu-7-bg');
let dmMenu7Active = false;
const dmMenu7Timeline = gsap.timeline({
onStart: () => {
dmMenu7BG.style.display = 'flex';
},
onReverseComplete: () => {
dmMenu7BG.style.display = 'none';
}
});
dmMenu7Timeline.pause();
dmMenuIcon7.addEventListener('click', () => {
if(dmMenu7Active) {
dmMenu7Timeline.reverse();
// body.classList.remove('no-scroll');
}
else {
dmMenu7Timeline.play();
// body.classList.add('no-scroll');
}
dmMenu7Active = !dmMenu7Active;
});
//Gsap timeline
dmMenu7Timeline.from('.dm-menu-7-bg', {
opacity:0,
duratIon:0.5
});
dmMenu7Timeline.from('.dm-menu-left-7', {
y:'50vh',
duration:0.5,
ease:'power3.out'
},0.7);
dmMenu7Timeline.from('.dm-menu-title-7 .elementor-heading-title', {
y:'50vh',
duration:0.5,
ease:'power3.out'
},0.7);
dmMenu7Timeline.from('.dm-menu-right-7', {
y:'50vh',
duration:0.5,
ease:'power3.out'
},0.7);
</script>
<style>
/*Stop scrolling when Full screen Menu is opened*/
body.no-scroll {
overflow: hidden !important;
max-height: 100vh !important;
}
</style>
<script>
const body = document.body;
</script>
