INCREDIBLE Animated Side Menu in Elementor | WordPress Advanced Navigation

Elementor 3.17 Update Broke My Forms — Here’s the Fix

Everything looks fine for about twelve seconds. Then the contact forms stop submitting. No error message. No console warning. Just… ...

My WordPress Site Got Hacked (Not My Fault — wp2shell Did It)

Someone just exploited a hole in WordPress core that lets them take over your server without logging in. Here's what ...

Elementor Update Just Broke My Site — Here’s How I Sorted It

Updated Elementor and your site broke? I walk through the actual fixes that worked when it happened to a client ...

How To Make A Vertical 3D Gallery Slider

So if you follow along in the video, I refer to this blog post for you to enter code at ...

Showing Slide 1 of 5

So if you follow along in the video, I refer to this blog post for you to enter code at certain point into the HTML widget, so below is everything you will need!

Alternatively

You can download the complete template here

The Following are the css class names I used in the tutorial:

				
					reboot-side-menu-area

reboot-side-menu-button

reboot-side-menu

reboot-side-menu-social

The Following code goes into the HTML widget:

				
					<style>
.reboot-side-menu-area{
    --hide-on-scroll: true;
    --hide-on-scroll-amount: 100;
    --menu-icon-width: 48px;
    --menu-icon-gap: 15px;
}

.reboot-side-menu-area .reboot-side-menu-button{
    cursor: pointer;
    height: var(--min-height,45px);
    overflow: hidden !important;
}
.reboot-side-menu-area .reboot-side-menu-button .elementor-widget-button{
    transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.reboot-side-menu-area.open .reboot-side-menu-button .elementor-widget-button{
    transform: translateY(-100%);
}
.reboot-side-menu-area .reboot-side-menu-button .elementor-button{
    height: var(--min-height,45px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.reboot-side-menu-area .reboot-side-menu-button .elementor-button-icon{
    margin: 0;
}
.reboot-side-menu-area .reboot-side-menu-button .elementor-button-content-wrapper{
    perspective: 6em;
}
.reboot-side-menu-area .reboot-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;
}
.reboot-side-menu-area .reboot-side-menu-button .elementor-widget-button.open .elementor-button-text:nth-child(1){
    opacity: 0;
    transform: rotateX(90deg) scaleX(.9) translate3d(0, -10px, 0);
}
.reboot-side-menu-area .reboot-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;
}
.reboot-side-menu-area .reboot-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;
}
.reboot-side-menu-area:not(.open-arrow) .reboot-side-menu{
    pointer-events: none;
}
.reboot-side-menu-area .reboot-side-menu:before{
    top: 0;
    right: 0;
    left: unset;
    transition: all 0.75s cubic-bezier(.76,0,.24,1);
}
.reboot-side-menu-area:not(.open) .reboot-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));
}
.reboot-side-menu-area:not(.anim) .reboot-side-menu:before{
    transition: none;
    opacity: 0;
}
.reboot-side-menu-area .reboot-side-menu .e-con::-webkit-scrollbar,
.reboot-side-menu-area .reboot-side-menu .e-container::-webkit-scrollbar{
    display: none;
}
.reboot-side-menu-area .reboot-side-menu .e-con,
.reboot-side-menu-area .reboot-side-menu .e-container{
    overflow-y: auto;
    max-height: calc(100vh - 20px - var(--margin-block-start,113px));
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.reboot-side-menu-area .reboot-side-menu .elementor-icon-list-item,
.reboot-side-menu-area .reboot-side-menu .elementor-icon-list-item a{
    perspective: calc(3*48px);
    perspective-origin: bottom;
}
.reboot-side-menu-area .reboot-side-menu .elementor-icon-list-item{
    margin-top: 0 !important;
    padding-top: var(--padding-top);
}
.reboot-side-menu-area .reboot-side-menu .elementor-icon-list-item:first-child{
    padding-top: 0;
}
.reboot-side-menu-area .reboot-side-menu .elementor-icon-list-item a{
    outline: none;
}
.reboot-side-menu-area .reboot-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;
}
.reboot-side-menu-area.open-arrow .reboot-side-menu .elementor-icon-list-icon{
    opacity: 1;
    transition: all 0s cubic-bezier(.215,.61,.355,1) calc(var(--index,0) * .1s + 0.55s);
}
.reboot-side-menu-area .reboot-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;
}
.reboot-side-menu-area .reboot-side-menu .elementor-icon-list-icon svg{
    display: none;
}
.reboot-side-menu-area .reboot-side-menu .elementor-icon-list-item:hover .elementor-icon-list-icon i{
    margin-left: -0.07em;
}
.reboot-side-menu-area .reboot-side-menu .elementor-icon-list-icon i:before,
.reboot-side-menu-area .reboot-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;
}
.reboot-side-menu-area .reboot-side-menu .elementor-icon-list-icon i:after{
    transform: rotate(-45deg) translateX(0.05em);
}
.reboot-side-menu-area .reboot-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));
}
.reboot-side-menu-area .reboot-side-menu .elementor-icon-list-icon + .elementor-icon-list-text{
    margin-left: calc(0px - var(--menu-icon-width,48px) - var(--menu-icon-gap,15px));
}
.reboot-side-menu-area .reboot-side-menu .elementor-icon-list-item:hover .elementor-icon-list-text{
    margin-left: 0;
}
.reboot-side-menu-area.open-instant .reboot-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;
}
.reboot-side-menu-area .reboot-side-menu-social{
    display: block;
    background: none;
}
.reboot-side-menu-area .reboot-side-menu-social .elementor-widget-empty-icon{
    display: none;
}
.reboot-side-menu-area .reboot-side-menu-social .elementor-icon-list-item{
    width: 47%;
    float: left;
}
.reboot-side-menu-area .reboot-side-menu-social a{
    display: inline-block;
    width: auto;
}
.reboot-side-menu-area .reboot-side-menu-social .elementor-icon-list-text{
    transform: translate3d(0,100%,0);
    transition: transform 0s linear .45s, opacity 0.3s linear;
    max-width: 100%;
}
.reboot-side-menu-area.open-instant .reboot-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;
}
.reboot-side-menu-area .reboot-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);
}
.reboot-side-menu-area .reboot-side-menu-social .elementor-icon-list-item:hover .elementor-icon-list-text:after{
    transform: scaleX(100%);
}

@media (max-width:767px){
.reboot-side-menu-area{
    --menu-icon-width: 38px;
    --menu-icon-gap: 10px;
}
.reboot-side-menu-area .reboot-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(!rebootNonce108){
var rebootNonce108 = true
var $ = jQuery
$(document).ready(function(){

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

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

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

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

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

    var $this = $(this)
    rebootshrinkmenu($this)
    setTimeout(function(){
        $this.addClass('anim')
    },100)
    
    $(this).find('.reboot-side-menu .elementor-icon-list-item').each(function(i){
        rebootcreatecss($(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>')
        }
    })
})

$('.reboot-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

$('.reboot-side-menu-button').on('click', function(){
    if(clickLock) return
    var $this = $(this),
        menu = $this.closest('.reboot-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)
})

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

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

})
}
</script>