Full screen Hamburger Navigation Menu Hover Effects

 

 

CSS code snippet for Hamburger Menu Icon (Inner Section):

selector{
    width: 40px;
    cursor: pointer;
}

 

CSS code snippet for Close icon (Inner Section):

selector{
    width: 50px;
    cursor: pointer;
    position: absolute;
    top: 50px;
    right: 40px;
    opacity: 0;
    transition: all 0.3s ease-in-out 1.3s;
}

 

All JavaScript code snippets:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

var $ = jQuery
    leavePage = false

var placeImages = function(){
    
$('.f-menu .elementor-icon-list-item').each(function(i){
    
    var offset = 20, 
        x = $(this).find('.elementor-icon-list-text').width() + offset,
        y = $(this).offset().top - $('.f-menu .elementor-icon-list-item').eq(0).offset().top
        
    console.log($(window).width())
        
    if( $(window).width() < 768 ) { x = 0 }
    
    $('.menu-image .elementor-gallery-item').eq(i).css('transform', 'translate(' + x + 'px,' + y + 'px)')
    
    $('.menu-image').css('top', $('.f-menu .elementor-icon-list-item').eq(0).offset().top - $('.f-menu-section').offset().top)
})
}


$(document).ready(function(){
    
placeImages()

var menuStart = 0.8;
    menuDiff = 0.1;

$('.f-menu-section .elementor-icon-list-item').each(function(){
    
    $(this).css('transition-delay', menuStart + 's')
    menuStart += menuDiff
})

var menuHovered = false

$('.f-menu .elementor-icon-list-item').hover(function(){
    
    var i = $(this).index()
   $('.menu-image .elementor-gallery-item').eq(i).addClass('active')
   $('.menu-image').css('z-index', 1)
   menuHovered = true
}, function(){
    $('.menu-image .elementor-gallery-item').removeClass('active')
    menuHovered = false
    setTimeout(function(){
        if(menuHovered) return
        $('.menu-image').css('z-index', -1)
        
    },300)
})

$('.f-open').on('click', function(){
    $('.f-menu-section').addClass('active')
})

$('.f-close').on('click', function(){
    $('.f-menu-section').removeClass('active')
})


$('.f-menu-section .elementor-icon-list-item a').on('click', function(){
    
    setTimeout(function(){
        if(leavePage) return
        $('.f-menu-section').addClass('faded')
        setTimeout(function(){
            $('.f-menu-section').removeClass('active')
        },200)
        setTimeout(function(){
            $('.f-menu-section').removeClass('faded')
        },1000+200)
    },50)
})

})

window.onbeforeunload = () => {
    leavePage = true
    
}

$(window).on('load resize', placeImages)

</script>

 

CSS code snippet for Menu (2nd Section):

selector{
    position: fixed;
    top: 0;
    width: 100vw;
    transform: translateX(-100%);
    transition: all 1s ease-in-out !important;
    height: 100vh;
    overflow-y: auto;
}
selector.active{
    transform: none;
}
selector.faded{
    opacity: 0;
    transition: all 1s ease-in-out, opacity 0.2s ease-in-out !important;
}

selector.active .f-menu .elementor-icon-list-item{
    opacity: 1;
    transform: none;
}
selector.active .f-close{
    opacity: 1 !important;
}
selector.active .f-social .elementor-icon-list-item{
    opacity: 1;
}
selector .elementor-container,
selector .elementor-column,
selector .elementor-widget-wrap{
    position: static !important;
}
selector.active .menu-image{
    opacity: 1;
}

 

CSS code snippet for Navigation Menu (Icon List Widget):

selector{
    --stroke-color: #fff;
    --hover-angle: -7deg;
}
selector .elementor-icon-list-item .elementor-icon-list-text{
    -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--stroke-color);
  transition: all 0.2s ease-in-out, transform 0.1s ease-in-out;
}
selector .elementor-icon-list-item .elementor-icon-list-text:hover{
    color: transparent;
    transform: skew(var(--hover-angle));
}
selector .elementor-icon-list-item{
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.5s ease-in-out;
}
selector a:focus {
    outline: none;
}

 

CSS code snippet for Social Menu (Icon List Widget):

selector .elementor-icon-list-item{
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

 

CSS code snippet for Menu Hover Images (Gallery Widget):

selector{
    --size: 280px;
}

selector{
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
selector .elementor-gallery-item{
    position: absolute;
    top: 0;
    left: 0;
    width: var(--size);
}
selector .elementor-gallery-item .e-gallery-image,
selector .elementor-gallery-item .elementor-gallery-item__overlay{
    opacity: 0;
    transform: translateY(-50px) scaleX(0.5) scaleY(0.8);
    transition: all 0.3s ease-in-out;
    transform-origin: top left;
}
selector .elementor-gallery-item.active .e-gallery-image,
selector .elementor-gallery-item.active .elementor-gallery-item__overlay{
    opacity: 1;
    transform: none;
}