INCREDIBLE Animated Side Menu in Elementor | WordPress Advanced Navigation
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>
Other Articles
How To Make A Vertical 3D Gallery Slider
https://youtu.be/BWoXciYFn-Q So if you follow along in the video, I refer to this blog post for you to enter code ...
How To Make A Horizontal 3D Gallery Slider
So if you follow along in the video, I refer to this blog post for you to enter code at ...
How To Make A Auto Rotating 3D Carousel
So if you follow along in the video, I refer to this blog post for you to enter code at ...
How To Make A 3D Carousel For Products
So if you follow along in the video, I refer to this blog post for you to enter code at ...