How to Create a Stunning Full-Width Navigation Menu with Hover Images in Elementor | WordPress Popup Menu

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-menu-open

reboot-image-menu

reboot-menu-left

reboot-menu-right

reboot-menu-close

The Following code goes into the Menu Container (reboot-image-menu) in the Custom CSS Area:

				
					selector{
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    --h: var(--min-height);
}
selector.showing{
    opacity: 1;
    pointer-events: auto;
}
selector .elementor-widget-icon-list ul li{
    opacity: 0;
    transform: translateY(30px) scaleY(1.1) skewY(10deg);
}
selector.showing .elementor-widget-icon-list ul li{
    opacity: 1;
    transform: none;
    transition: all 0.5s ease-in-out calc(0.2s + var(--index,1)*0.1s);
}
selector .reboot-menu-right,
selector .reboot-menu-close{
    opacity: 0;
}
selector.showing .reboot-menu-right,
selector.showing .reboot-menu-close{
    opacity: 1;
    transition: all 0.5s ease-in-out 0.3s;
}

.reboot-menu-open,
.reboot-menu-close{
    cursor: pointer;
}

The Following code goes into the Menu Item List Container (reboot-menu-left) in the Custom CSS Area:

				
					selector{
    height: var(--h);
}
selector.overflow::-webkit-scrollbar {
    display: none;
}
selector.overflow{
    justify-content: flex-start;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
selector .elementor-widget-html{
    display: none;
}

The Following code goes into the Icon List Widget in the Custom CSS Area:

				
					selector{
    --hover-color: #ffffff;
    --mobile-color: #000000;
    --mobile-background: #ffffff;
}
selector .elementor-icon-list-text{
    transition: all 0.3s ease-in-out;
}
selector .elementor-icon-list-text.active{
    color: var(--hover-color, #fff);
}
selector a:focus{
    outline: none;
}

@media (max-width: 767px){
selector .elementor-icon-list-text{
    background: var(--mobile-background, #fff);
    padding: 8px 10px;
}
selector .elementor-icon-list-text,
selector .elementor-icon-list-text.active{
    color: var(--mobile-color, #000) !important;
}
}

The Following code goes into the Images List for Menu Items Container (reboot-menu-right) in the Custom CSS Area:

				
					selector .elementor-widget-spacer{
    opacity: 0;
    transition: all 0.4s ease-in-out;
}
selector .elementor-widget-spacer:nth-child(1),
selector .elementor-widget-spacer.active{
    opacity: 1;
}
.reboot-menu-close .elementor-widget-divider{
    width: 100% !important;
    flex-grow: 0;
}

@media(max-width:767px){
selector{
    position: absolute;
    height: 100%;
    z-index: 0;
}   
}

The Following code goes into the HTML WIDGET that’s int he Menu List Items Container:

				
					<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){

function hoveDefault(){
    $('.reboot-menu-left .elementor-icon-list-text').eq(0).trigger('mouseover')
}

function openMenu(){
    $('.reboot-image-menu').addClass('showing')
}

function closemenu(){
    $('.reboot-image-menu').removeClass('showing')
    setTimeout(hoveDefault, 500)
}

$('.reboot-image-menu').find('.elementor-widget-icon-list ul li').each(function(){
    var index = $(this).index()+1
    $(this).css('--index', index)
})

$('.reboot-menu-open').on('click', openMenu)
$('.reboot-menu-close').on('click', closemenu)


/* If Link is #id then Close Menu */

$('.reboot-menu-left a').on('click', function(e){
    var link = $(this).attr('href')
    if(link){
        if(link == '#'){
            e.preventDefault()
        }
        if( link.length > 1 && link.startsWith('#') ){
            closemenu()
        }    
    }
    
})


/* Image and Color Change on Menu Item Hover */

$('.reboot-menu-left .elementor-icon-list-text').hover(function(e){
    
var $this = $(this),
    index = $this.closest('.elementor-icon-list-item').index(),
    currentImage = $('.reboot-menu-right .elementor-widget-spacer').eq(index),
    color = currentImage.find('.elementor-widget-container').css('background-color')
    
$this.closest('.reboot-image-menu').css('background-color', color)

if(!currentImage.length) return

$this.closest('.elementor-icon-list-items').find('.elementor-icon-list-text').removeClass('active')
if(e.originalEvent){ $this.addClass('active') }

currentImage.siblings('.elementor-widget-spacer').removeClass('active')
currentImage.addClass('active')

}, function(){})

hoveDefault()

})


/* Adjust alignment of Left side Menu */

$(window).on('load resize', function(){
    
    $('.reboot-menu-left').each(function(){
        
        var containerHeight = $(this).height(),
        menuHeight = $(this).find('.elementor-widget-icon-list').outerHeight()
        
        if( menuHeight > containerHeight ){
            $(this).addClass('overflow')
        }else{
            $(this).removeClass('overflow')
        }
    })
})

</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 ...