How to Create an Animated Menu in Elementor Without Extra Plugins

A well-designed navigation menu is essential for any website, and adding animations can make it more engaging. In this tutorial, we’ll create a stunning animated menu in Elementor without using any extra plugins. This menu will feature smooth transitions, stylish hover effects, and a unique button animation that enhances the overall user experience.

To begin, open the Elementor editor and add a new container, which will serve as the main wrapper for our menu. This container needs to be full-width with a set minimum height, ensuring it aligns perfectly at the top of the page. We also need to adjust the z-index to make sure the menu stays on top of all other content.

Next, we’ll add our logo on the left side of the container. Using Elementor’s image widget, you can upload your preferred logo and customize its size and position. This ensures that the branding remains prominent while integrating smoothly with the menu structure.

On the right side, we’ll create a button that will act as our menu trigger. This button is designed with custom styles, including a border radius and hover effects, giving it a modern look. By setting its position to absolute, we can precisely place it within the header section. When clicked, this button will activate the animated menu, smoothly revealing the navigation links.

Now, it’s time to build the actual menu panel. We need to create another container that will hold the navigation links. This panel will be hidden by default and will slide into view when the button is clicked. Inside this panel, we’ll add menu items using Elementor’s icon list widget, allowing for easy customization of text, icons, and hover effects.

To enhance the visual appeal, each menu item will have custom hover effects, such as underlines and arrows that animate when users interact with them. Additionally, at the bottom of the panel, we can include social media links with a smooth hover animation, giving the menu a polished look.

Finally, we’ll apply custom CSS and JavaScript to ensure the menu opens and closes seamlessly. The animation will create a fluid transition, making the menu appear elegant and professional. We’ll also optimize the menu for mobile devices, ensuring that it functions smoothly across all screen sizes.

By following this method, you can create a dynamic and interactive navigation menu that elevates your Elementor website’s design. This animated menu not only improves usability but also adds a unique touch to your website, making it more engaging for visitors.

Css Class

Main Wrapper = alen-side-menu-areaLogo =alen-hide-on-scrollbtn wrapper = alen-side-menu-buttoncontent = alen-side-menulist = alen-side-menu-social

Copy Code

alen-side-menu-area alen-hide-on-scroll alen-side-menu-button alen-side-menu alen-side-menu-social

JavaScript Code

Copy Code


<style>
.alen-side-menu-area{
    --hide-on-scroll: true;
    --hide-on-scroll-amount: 100;
    --menu-icon-width: 48px;
    --menu-icon-gap: 15px;
}
.alen-side-menu-area .alen-hide-on-scroll{
    transition: all 0.3s ease-in-out;
}
.alen-side-menu-area .alen-hide-on-scroll.hide{
    opacity: 0;
    pointer-events: none;
}
.alen-side-menu-area .alen-side-menu-button{
    cursor: pointer;
    height: var(--min-height,45px);
    overflow: hidden !important;
}
.alen-side-menu-area .alen-side-menu-button .elementor-widget-button{
    transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.alen-side-menu-area.open .alen-side-menu-button .elementor-widget-button{
    transform: translateY(-100%);
}
.alen-side-menu-area .alen-side-menu-button .elementor-button{
    height: var(--min-height,45px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.alen-side-menu-area .alen-side-menu-button .elementor-button-icon{
    margin: 0;
}
.alen-side-menu-area .alen-side-menu-button .elementor-button-content-wrapper{
    perspective: 6em;
}
.alen-side-menu-area .alen-side-menu-button .elementor-button-text:nth-child(1){
    transform-origin: top;
    transition: transform .55s cubic-bezier(.645,.045,.355,1), opacity .35s linear .2s;
}
.alen-side-menu-area .alen-side-menu-button .elementor-widget-button.open .elementor-button-text:nth-child(1){
    opacity: 0;
    transform: rotateX(90deg) scaleX(.9) translate3d(0, -10px, 0);
}
.alen-side-menu-area .alen-side-menu-button .elementor-button-text:nth-child(2){
    position: absolute;
    opacity: 0;
    transform: rotateX(-90deg) scaleX(.9) translate3d(0, 10px, 0);
    transform-origin: bottom;
    transition: transform .55s cubic-bezier(.645,.045,.355,1), opacity .35s linear .2s;
}
.alen-side-menu-area .alen-side-menu-button .elementor-widget-button.open .elementor-button-text:nth-child(2){
    opacity: 1;
    transform: rotateX(0deg) scaleX(1) translateZ(0);
    transition: transform .75s cubic-bezier(.645,.045,.355,1), opacity .35s linear .3s;
}
.alen-side-menu-area:not(.open-arrow) .alen-side-menu{
    pointer-events: none;
}
.alen-side-menu-area .alen-side-menu:before{
    top: 0;
    right: 0;
    left: unset;
    transition: all 0.75s cubic-bezier(.76,0,.24,1);
}
.alen-side-menu-area:not(.open) .alen-side-menu:before{
    height: var(--button-height,45px);
    width: var(--button-width,110px);
    transform: translate(calc(-1*var(--button-right,25px)), var(--button-top,25px));
}
.alen-side-menu-area:not(.anim) .alen-side-menu:before{
    transition: none;
    opacity: 0;
}
.alen-side-menu-area .alen-side-menu .e-con::-webkit-scrollbar,
.alen-side-menu-area .alen-side-menu .e-container::-webkit-scrollbar{
    display: none;
}
.alen-side-menu-area .alen-side-menu .e-con,
.alen-side-menu-area .alen-side-menu .e-container{
    overflow-y: auto;
    max-height: calc(100vh - 20px - var(--margin-block-start,113px));
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.alen-side-menu-area .alen-side-menu .elementor-icon-list-item,
.alen-side-menu-area .alen-side-menu .elementor-icon-list-item a{
    perspective: calc(3*48px);
    perspective-origin: bottom;
}
.alen-side-menu-area .alen-side-menu .elementor-icon-list-item{
    margin-top: 0 !important;
    padding-top: var(--padding-top);
}
.alen-side-menu-area .alen-side-menu .elementor-icon-list-item:first-child{
    padding-top: 0;
}
.alen-side-menu-area .alen-side-menu .elementor-icon-list-item a{
    outline: none;
}
.alen-side-menu-area .alen-side-menu .elementor-icon-list-icon{
    width: var(--menu-icon-width,48px);
    height: calc(0.6*var(--menu-icon-width,48px));
    align-items: center;
    padding-right: var(--menu-icon-gap,15px);
    overflow: hidden;
    opacity: 0;
    box-sizing: content-box;
}
.alen-side-menu-area.open-arrow .alen-side-menu .elementor-icon-list-icon{
    opacity: 1;
    transition: all 0s cubic-bezier(.215,.61,.355,1) calc(var(--index,0) * .1s + 0.55s);
}
.alen-side-menu-area .alen-side-menu .elementor-icon-list-icon i{
    width: 100% !important;
    height: 0.1em;
    background: currentColor;
    position: relative;
    margin-left: calc(0px - var(--menu-icon-width,48px) - var(--menu-icon-gap,15px));
    transition: all .65s cubic-bezier(.215,.61,.355,1) !important;
}
.alen-side-menu-area .alen-side-menu .elementor-icon-list-icon svg{
    display: none;
}
.alen-side-menu-area .alen-side-menu .elementor-icon-list-item:hover .elementor-icon-list-icon i{
    margin-left: -0.07em;
}
.alen-side-menu-area .alen-side-menu .elementor-icon-list-icon i:before,
.alen-side-menu-area .alen-side-menu .elementor-icon-list-icon i:after{
    content: "";
    position: absolute;
    width: 40%;
    transform: rotate(45deg) translateX(0.05em);
    transform-origin: right center;
    height: 0.1em;
    background: currentColor;
    right: 0;
}
.alen-side-menu-area .alen-side-menu .elementor-icon-list-icon i:after{
    transform: rotate(-45deg) translateX(0.05em);
}
.alen-side-menu-area .alen-side-menu .elementor-icon-list-text{
    transform: rotateX(90deg) translate3d(0,60px,0);
    opacity: 0;
    transition: transform 0s linear .45s, opacity 0.3s linear !important;
    transform-origin: center bottom;
    padding-left: 0 !important;
    max-width: calc(100% - var(--menu-icon-width,48px) - var(--menu-icon-gap,15px));
}
.alen-side-menu-area .alen-side-menu .elementor-icon-list-icon + .elementor-icon-list-text{
    margin-left: calc(0px - var(--menu-icon-width,48px) - var(--menu-icon-gap,15px));
}
.alen-side-menu-area .alen-side-menu .elementor-icon-list-item:hover .elementor-icon-list-text{
    margin-left: 0;
}
.alen-side-menu-area.open-instant .alen-side-menu .elementor-icon-list-text{
    transform: rotateX(0deg);
    opacity: 1;
    transition: transform .65s cubic-bezier(.215,.61,.355,1) calc(var(--index,0) * .1s + .55s), opacity .35s linear calc(var(--index,0) * .1s + .55s), margin-left .65s cubic-bezier(.215,.61,.355,1) !important;
}
.alen-side-menu-area .alen-side-menu-social{
    display: block;
    background: none;
}
.alen-side-menu-area .alen-side-menu-social .elementor-widget-empty-icon{
    display: none;
}
.alen-side-menu-area .alen-side-menu-social .elementor-icon-list-item{
    width: 47%;
    float: left;
}
.alen-side-menu-area .alen-side-menu-social a{
    display: inline-block;
    width: auto;
}
.alen-side-menu-area .alen-side-menu-social .elementor-icon-list-text{
    transform: translate3d(0,100%,0);
    transition: transform 0s linear .45s, opacity 0.3s linear;
    max-width: 100%;
}
.alen-side-menu-area.open-instant .alen-side-menu-social .elementor-icon-list-text{
    transition: opacity .45s linear 0s, transform .65s cubic-bezier(.215,.61,.355,1) 0s !important;
    transition-delay: calc(var(--index)*.1s + .7s) !important;
}
.alen-side-menu-area .alen-side-menu-social .elementor-icon-list-text:after{
    content: "";
    height: 1px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: currentColor;
    transform: scaleX(0%);
    transform-origin: left;
    transition: all 0.75s cubic-bezier(.645,.045,.355,1);
}
.alen-side-menu-area .alen-side-menu-social .elementor-icon-list-item:hover .elementor-icon-list-text:after{
    transform: scaleX(100%);
}

@media (max-width:767px){
.alen-side-menu-area{
    --menu-icon-width: 38px;
    --menu-icon-gap: 10px;
}
.alen-side-menu-area .alen-side-menu-social .elementor-icon-list-item {
    width: 50%;
}
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
if(!alenNonce108){
var alenNonce108 = true
var $ = jQuery
$(document).ready(function(){

function getCSS(el, property){
    return getComputedStyle(el.get(0)).getPropertyValue(property)
}

function setCSS(el, property, value){
    el.each(function(i){
        el.get(i).style.setProperty(property, value)
    })
}

function setSmallState($this){
    var button = $this.find('.alen-side-menu-button'),
        mainMenu = $this.find('.alen-side-menu'),
        buttonRight = (parseFloat(getCSS(button, 'right')) - parseFloat(getCSS(mainMenu, 'right'))) + 'px',
            buttonTop = (parseFloat(getCSS(button, 'top')) - parseFloat(getCSS(mainMenu, 'top'))) + 'px',
        buttonHeight = button.height(),
        buttonWidth = button.width()
        
    setCSS($this, '--button-right', buttonRight)
    setCSS($this, '--button-top', buttonTop)
    setCSS($this, '--button-height', buttonHeight + 'px')
    setCSS($this, '--button-width', buttonWidth + 'px')
    
    $this.find('.alen-side-menu .elementor-widget-icon-list').each(function(i){
        var paddingBottom = getCSS($(this).find('.elementor-icon-list-item').eq(0), 'padding-bottom')
        setCSS($(this).find('.elementor-icon-list-item'), '--padding-top', paddingBottom)
    })
}

$(window).on('load resize', function(){
$('.alen-side-menu-area').each(function(){
    setSmallState($(this))
})
})

$('.alen-side-menu-area').each(function(){

    var $this = $(this)
    setSmallState($this)
    setTimeout(function(){
        $this.addClass('anim')
    },100)
    
    $(this).find('.alen-side-menu .elementor-icon-list-item').each(function(i){
        setCSS($(this), '--index', i)
        var icon = $(this).find('.elementor-icon-list-icon')
        if(icon.length && !icon.find('i').length){
            icon.append('<i aria-hidden="true" class="fas fa-arrow-right"></i>')
        }
    })
})

$('.alen-side-menu-button .elementor-widget-button').each(function(){
    var wrapper = $(this).find('.elementor-button-content-wrapper'),
    text = $(this).find('.elementor-button-text')
    text.clone().appendTo(wrapper)
})

var clickLock = false

$('.alen-side-menu-button').on('click', function(){
    if(clickLock) return
    var $this = $(this),
        menu = $this.closest('.alen-side-menu-area'),
        button = $this.find('.elementor-widget-button')
        clickLock = true
    if(menu.hasClass('open')){
        button.eq(1).removeClass('open')
        menu.removeClass('open-arrow')
        setTimeout(function(){ menu.removeClass('open-instant') },300)
        setTimeout(function(){ menu.removeClass('open') },500)
        setTimeout(function(){ button.eq(0).removeClass('open') },750)
    }else{
        button.eq(0).addClass('open')
        setTimeout(function(){ menu.addClass('open open-instant open-arrow') },500)
        setTimeout(function(){ button.eq(1).addClass('open') },750)
    }
    setTimeout(function(){ clickLock = false },750)
})

$('.alen-side-menu-button a').on('click', function(e){
    e.preventDefault()
})

$('body').on('click', function(e){
    $('.alen-side-menu-area').each(function(){
        if($(this).hasClass('open-instant') && !$(e.target).closest('.alen-side-menu').length && !$(e.target).closest('.alen-side-menu-button').length){
            $(this).find('.alen-side-menu-button').trigger('click')
        }
    })
})

$(window).on('scroll', function(){
    $('.alen-hide-on-scroll').each(function(){
        var offset = isNaN(parseFloat(getCSS($(this), '--hide-on-scroll-amount'))) ? parseFloat(getCSS($(this), '--hide-on-scroll-amount')) : 100
        if(getCSS($(this), '--hide-on-scroll').trim() == 'true'){
            if($(window).scrollTop() > offset){
                $(this).addClass('hide')    
            }else{
                $(this).removeClass('hide')
            }
        }
    })
})
})
}
</script>