Want to get this as ready made template with just 1 CLICK INSTALL?
Code Snippet for Image Menu:
<style>
body.menu-active{
overflow: hidden;
}
.mdw-menu-145{
--mobile-border-color: #2b3530;
}
html:not(.elementor-html) .mdw-menu-145 .elementor-widget-html{
display: none;
}
.mdw-menu-145 a:focus{
outline: none;
}
.mdw-menu-145-open{
cursor: pointer;
}
.mdw-menu-145-open .elementor-divider-separator{
transition: 0.8s cubic-bezier(.24,.43,.15,.97);
}
.mdw-menu-145-open .elementor-widget-divider:nth-child(2) .elementor-divider-separator{
transition-delay: 0.15s;
}
.mdw-menu-145-open .elementor-widget-divider:nth-child(3) .elementor-divider-separator{
transition-delay: 0.3s;
}
.mdw-menu-145-open .elementor-divider-separator::before{
content: "";
position: absolute;
width: 100%;
height: 1px;
background: var(--divider-color,#000000);
right: calc(100% + 20px);
top: calc(-1*var(--divider-border-width,1px));
}
.mdw-menu-145-open:hover .elementor-divider-separator{
transform: translateX(calc(100% + 20px));
}
html.elementor-html .mdw-menu-145-main{
position: fixed !important;
top: 90px !important;
}
html.elementor-html body:not([class*="elementor_library"]) .mdw-menu-145-main,
html:not(.elementor-html) .mdw-menu-145-main{
clip-path: inset(100% 0 0 0);
will-change: clip-path;
transition: 0s !important;
}
body.menu-active .mdw-menu-145-main{
clip-path: inset(0%);
transition: 1s cubic-bezier(0.4, 0, 0.01, 1) !important;
}
body.menu-closing .mdw-menu-145-main{
clip-path: inset(0 0 100% 0);
transition: 1s cubic-bezier(0.4, 0, 0.01, 1) !important;
}
html:not(.elementor-html) .mdw-menu-145-images,
html.elementor-html .mdw-menu-145-show-images{
display: none;
}
.mdw-menu-145-show-images .elementor-widget-image{
clip-path: inset(100% 0 0 0);
transition: 0.6s;
}
.mdw-menu-145-show-images .elementor-widget-image.mdw-showing{
clip-path: inset(0 0 0 0);
}
.mdw-menu-145-show-images img{
transform: scale(1.2);
transition: 1.2s;
}
.mdw-menu-145-show-images .elementor-widget-image.mdw-showing img{
transform: scale(1);
}
.mdw-menu-145-content{
height: var(--min-height, 100vh);
scrollbar-width: none;
-ms-overflow-style: none;
overflow-y: auto;
}
.mdw-menu-145-content > .e-con{
max-width: 100%;
}
html:not(.elementor-html) .mdw-menu-145-links .elementor-icon-list-item,
html:not(.elementor-html) .mdw-menu-145-content > .e-con > *:not(.mdw-menu-145-links){
transform: translateY(40px);
opacity: 0;
}
body.menu-active .mdw-menu-145-links .elementor-icon-list-item,
body.menu-active .mdw-menu-145-content > .e-con > *:not(.mdw-menu-145-links){
transform: translateY(0);
opacity: 1;
transition: 1s ease calc(var(--d) * 0.1s);
}
.mdw-menu-145-links .elementor-icon-list-item.mdw-active .elementor-icon-list-text{
position: relative;
}
.mdw-menu-145-links .elementor-icon-list-item.mdw-active .elementor-icon-list-text::before{
content: "";
position: absolute;
bottom: -3px;
left: 0;
height: 1px;
background: currentColor;
transition: 0.2s;
width: 100%;
}
.mdw-menu-145-links .elementor-icon-list-icon{
position: absolute;
top: unset;
overflow: hidden;
}
.mdw-menu-145-links .elementor-icon-list-text,
.mdw-menu-145-links .elementor-icon-list-item svg{
transition: transform 0.5s cubic-bezier(.24,.43,.15,.97) !important;
}
.mdw-menu-145-links .elementor-icon-list-item svg{
transform: translate(-120%, 120%);
}
.mdw-menu-145-links .elementor-icon-list-text{
padding-left: 0 !important;
}
.mdw-menu-145-links .elementor-icon-list-item:not(.mdw-active):hover .elementor-icon-list-text{
transform: translateX(45px);
}
.mdw-menu-145-links .elementor-icon-list-item:not(.mdw-active):hover svg{
transform: translate(0);
}
.mdw-menu-145-links .elementor-icon-list-item svg path{
fill: inherit;
}
.mdw-menu-145-bottom .elementor-heading-title:before{
content: "";
position: absolute;
width: 100%;
bottom: 0;
left: 0;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform .8s cubic-bezier(.24, .43, .15, .97);
}
.mdw-menu-145-bottom .elementor-heading-title:hover:before{
transform: scaleX(1);
transform-origin: left;
}
.mdw-menu-145-close .elementor-widget-divider{
max-width: unset !important;
width: 141.4%;
}
.mdw-menu-145-close .elementor-widget-divider:nth-child(1){
transform: rotate(45deg);
transform-origin: top left;
}
.mdw-menu-145-close .elementor-widget-divider:nth-child(2){
transform: rotate(-45deg);
transform-origin: bottom left;
}
.mdw-menu-145-close{
cursor: pointer;
}
.mdw-menu-145-close .elementor-divider-separator{
transition: 0.8s cubic-bezier(.24,.43,.15,.97);
}
.mdw-menu-145-close .elementor-widget-divider:nth-child(2) .elementor-divider-separator{
transition-delay: 0.15s;
}
.mdw-menu-145-close .elementor-divider-separator::before{
content: "";
position: absolute;
width: 100%;
height: 1px;
background: var(--divider-color);
right: calc(100% + 20px);
top: 0;
}
.mdw-menu-145-close .elementor-widget-divider:nth-child(2) .elementor-divider-separator::before{
right: unset;
left: calc(100% + 20px);
}
.mdw-menu-145-close:hover .elementor-divider-separator{
transform: translateX(calc(100% + 20px));
}
.mdw-menu-145-close:hover .elementor-widget-divider:nth-child(2) .elementor-divider-separator{
transform: translateX(calc(-100% - 20px));
}
@media (max-width: 1400px) and (min-width: 768px){
.mdw-menu-145-content > .e-con{
width: 590px;
}
.mdw-menu-145-links .elementor-icon-list-item:not(:first-child){
margin-block-start: 10px !important;
}
.mdw-menu-145-links .elementor-icon-list-item:not(:last-child){
padding-block-end: 10px !important;
}
}
@media(max-width: 767px){
.mdw-menu-145-links .elementor-icon-list-item,
.mdw-menu-145-links .elementor-icon-list-item a{
justify-content: space-between;
}
.mdw-menu-145-images{
display: none;
}
.mdw-menu-145-links .elementor-icon-list-item:last-child{
padding-bottom: 10px !important;
}
.mdw-menu-145-main .elementor-icon-list-icon{
position: unset !important;
order: 1;
}
.mdw-menu-145-links .elementor-icon-list-text::before{
display: none;
}
.mdw-menu-145-links .elementor-icon-list-text,
.mdw-menu-145-main .elementor-icon-list-item svg{
transform: translate(0) !important;
}
.mdw-menu-145-links .elementor-icon-list-item::before,
.mdw-menu-145-links .elementor-icon-list-item::after{
content: "";
position: absolute;
height: 1px;
width: 100%;
background: var(--mobile-border-color);
bottom: 0;
transform-origin: right;
transition: transform 0.8s cubic-bezier(.24, .43, .15, .97);
}
.mdw-menu-145-links .elementor-icon-list-item::before{
opacity: 0.5;
}
.mdw-menu-145-links .elementor-icon-list-item::after{
transform: scaleX(0);
}
.mdw-menu-145-links .elementor-icon-list-item:hover::after{
transform: scaleX(1);
transform-origin: left;
}
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
if(!MDW145){
var MDW145 = true
$(document).ready(function(){
var selector = '.mdw-menu-145'
$(selector).each(function(){
var $this = $(this),
menuItems = $this.find('.mdw-menu-145-links .elementor-icon-list-item'),
menuImages = $this.find('.mdw-menu-145-images .elementor-widget-image'),
imgShowWrapper = $this.find('.mdw-menu-145-show-images'),
hoverStartTime,
clickLock = false,
windowWidth,
activeIndex = prevIndex = 0
function setDelay(){
var delay = 0
$this.find('.mdw-menu-145-content > .e-con').children().each(function(){
if($(this).hasClass('mdw-menu-145-links')){
var startDelay = delay
if(windowWidth > 767){
var maxDelay = startDelay
$this.find('.mdw-menu-145-links .elementor-widget-icon-list').each(function(){
$(this).find('.elementor-icon-list-item').each(function(i){
delay = startDelay + i
maxDelay = Math.max(maxDelay, delay)
this.style.setProperty('--d', delay)
})
})
delay = maxDelay + 1
}else{
menuItems.each(function(i){
delay = startDelay + i
this.style.setProperty('--d', delay)
})
delay++
}
}else{
this.style.setProperty('--d', delay)
delay++
}
})
}
function checkUrl(){
var currentUrl = new URL(window.location.href),
currentPath = currentUrl.pathname.replace(/\/$/, ''),
currentHost = currentUrl.hostname
menuItems.find('a').each(function(i){
var href = $(this).attr('href')
if (!href) return
if(!href.startsWith('http://') && !href.startsWith('https://')){
var fillURL = ''
if(href.startsWith('/')) fillURL = currentHost
if(href.startsWith('?')) fillURL = currentHost + currentPath
href = 'http://' + fillURL + href
}
try{
var linkUrl = new URL(href),
linkHost = linkUrl.hostname,
linkPath = linkUrl.pathname.replace(/\/$/, '')
if(linkHost == currentHost && linkPath === currentPath){
$(this).parent().addClass('mdw-active')
activeIndex = prevIndex = i
}
}catch(e){}
})
}
function init(){
menuImages.find('img').attr('loading', 'eager')
setDelay()
checkUrl()
}
function menuOpen(){
if(clickLock) return
clickLock = true
$('body').addClass('menu-active')
imgShowWrapper.append(menuImages.eq(activeIndex).clone())
setTimeout(function(){
imgShowWrapper.find('.elementor-widget-image').addClass('mdw-showing')
},10)
setTimeout(function(){
clickLock = false
},1000)
}
function menuClose(){
if(clickLock) return
clickLock = true
$('body').addClass('menu-closing')
setTimeout(function(){
$('body').removeClass('menu-active menu-closing')
clickLock = false
},1000)
}
function deleteExtraImages(wrapper){
var items = wrapper.children()
var len = items.length
if (len > 10){
items.slice(0, len - 10).remove()
}
}
function imageChnage(){
deleteExtraImages(imgShowWrapper)
var index = menuItems.index(this)
if (index === prevIndex) return
if (!menuImages.eq(index).length) return
currentImg = menuImages.eq(index).clone()
imgShowWrapper.append(currentImg)
var newImg = imgShowWrapper.children().last()
setTimeout(function(){
newImg.addClass('mdw-showing')
}, 10)
prevIndex = index
}
init()
$this.find('.mdw-menu-145-open').on('click', menuOpen)
$this.find('.mdw-menu-145-close').on('click', menuClose)
menuItems.on('mouseover', imageChnage)
$(window).on('load resize', function(){
windowWidth = $(window).width()
setDelay()
})
})
})
}
</script>
