In our pursuit to empower you with distinctive web design tools and tips, we’re excited to share a unique solution: creating custom submenu animation effects using CSS and Elementor on WordPress. Believe it or not, our search showed a surprising lack of information on this particular topic online. Therefore, we decided to fill that gap ourselves.
Here at ‘Power of the Web,’ we take pride in providing practical, innovative solutions to web design problems. This time, we’ve concocted custom CSS code for a seamless and intriguing Elementor drop-down menu effect. This new trick isn’t just an addition to our arsenal of skills, but an exclusive secret we’re sharing with you. Be among the first to implement this game-changing feature on your website and redefine the user experience like never before.
In our Elementary Training Series, we walk you through each step of this process in an easy-to-follow guide. There’s something for everyone, whether you’re a beginner or a seasoned developer. Come and join us on this revolutionary journey!
So, head over to our YouTube channel @poweroftheweb to watch the tutorial. Don’t forget to subscribe to stay updated with more insightful #Elementor #WebDesign #PowerOfTheWeb!
Here is the CSS I’m using in this tutorial:
.elementor-nav-menu--main .menu-item-has-children {
position: relative;
}
.elementor-nav-menu--main .menu-item-has-children::after {
content: '' !important;
position: absolute !important;
top: 100%;
left: 0 ;
height: 100px ;
width: 100% ;
z-index: 1 ;
border-left: 0px;
}
.elementor-nav-menu--main .elementor-nav-menu--dropdown {
display: none;
opacity: 0;
width: 280px !important; /* Adjust menu width here */
transition: all 0.3s ease-in-out;
animation-name: dropDown;
animation-duration: 0.3s; /* Adjust timing here */
animation-fill-mode: forwards;
z-index: 2;
}
.elementor-nav-menu--main .menu-item-has-children:hover > .elementor-nav-menu--dropdown {
display: block;
}
@keyframes dropDown {
0% {
opacity: 0;
transform: translateY(0); /* Change this to change direction */
}
100% {
opacity: 1;
transform: translateY(-10px); /* Change this to change direction */
}
}
No Comments yet!