Site overlay, menu items hover | Total Theme

gistfile1.txt

// Open a new overlay wrapper around the main content and the footer.
add_action( 'wpex_hook_main_before', function() {
    echo '<div class="myprefix-overlay-wrapper">';
} );

// Close overlay wrapper.
add_action( 'wpex_hook_wrap_bottom', function() {
    echo '</div>';
}, 999 );

// Add CSS to style the overlay and javascript to toggle the affect when hovering over menu items.
add_action( 'wp_head', function() { ?>

    <style>
        .myprefix-overlay-wrapper {
            position: relative;
        }
        .myprefix-overlay-wrapper::after {
            content: "";
            display: block;
            visibility: hidden;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.15);
            transition: all .4s;
            z-index: -1;
        }
        .myprefix-overlay-wrapper--active::after {
            visibility: visible;
            opacity: 1;
            z-index: 999;
        }
    </style>

    <script>
        document.addEventListener( 'mouseover', ( event ) => {
            const overlay = document.querySelector( '.myprefix-overlay-wrapper' );
            if ( ! event.target.closest( '#site-navigation .menu-item' ) ) {
                overlay.classList.remove( 'myprefix-overlay-wrapper--active' );
                return;
            }
            overlay.classList.add( 'myprefix-overlay-wrapper--active' );
        } );
    </script>

<?php } );