Want to create a unique and interactive menu for your website? I’ll show you how to design a Menu with Mouse-Tracking Eyes and Stagger Animation using Elementor in this tutorial. This step-by-step guide will help you add a modern and engaging touch to your website, making it stand out.
In this video, you’ll learn:
- How to design a creative menu with stagger hover animations.
- The secret to building interactive “mouse-tracking eyes” that follow the cursor dynamically.
- How to use containers, widgets, and custom CSS/JavaScript to create advanced animations.
- Tips to make the design fully responsive for mobile and tablet users.
- How to download this menu design as a ready-made template, including container Version
Whether a WordPress beginner or an advanced Elementor user, this tutorial is perfect for adding unique hover effects and animations to your website. Follow along to create an eye-catching, professional menu that impresses your audience.
Make your website truly interactive with this creative Elementor design tutorial!
Want to get this as ready made template with just 1 CLICK INSTALL?
CSS Code Snippet on Icon List Widget: ( mc-stagger-menu )
selector{
--hover-background-color: #ffffff;
--hover-background-speed: 500;
--letter-animation-difference: 40;
}
selector{
position: relative;
z-index: 1;
display: flex;
justify-content: center;
}
selector .elementor-icon-list-item,
selector .elementor-icon-list-item a{
flex-direction: column;
padding-bottom: 0 !important;
}
selector .elementor-icon-list-item a{
-webkit-tap-highlight-color: transparent;
}
selector .elementor-icon-list-text{
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
selector .elementor-icon-list-text:after{
content: "";
position: absolute;
inset: 0;
background: var(--hover-background-color);
z-index: -1;
transform: scaleX(0);
transform-origin: right;
transition: transform calc(var(--hover-background-speed)*1ms) cubic-bezier(1, 0, 0.5, 1);
}
selector .elementor-icon-list-item:hover .elementor-icon-list-text:after{
transform: scaleX(100%);
transform-origin: left;
}
selector .elementor-icon-list-item span.word{
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
selector .elementor-icon-list-item span.word-up,
selector .elementor-icon-list-item span.word-down{
display: flex;
flex-direction: row;
}
selector .elementor-icon-list-item span.letter{
display: inline-block;
transition: transform 0.4s ease calc(var(--letter-delay));
}
selector .elementor-icon-list-item:hover span.letter{
transform: translateY(-100%);
}
JavaScript Code Snippet for Menu with Stagger Animation ( HTML Widget ) :
CSS Code Snippet on Main Container of Eye Ball ( mc-eye-effect ):
selector{
pointer-events: none;
}
selector .e-con,
selector .e-container{
transition: none;
}
@media (max-width: 767px){
selector .elementor-widget-divider {
--divider-border-width: var(--container-widget-width,30px) !important;
}
}
