JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

JavaScript

(function ($) {

    /* ======================================== */
    /* Document Ready
    /* ======================================== */

    $(document).ready(function() {
        
        // Inits the bind on the main menu hover
        if ($(window).width() > 980) {
            initMainMenuHover();
        }
    });
    
    /**
     * Triggers rollover show dropdown-menu
     */
    function initMainMenuHover()
    {
    
        var $link = $('#menu-primary > li');
        var $flyout = $('#omsMegaFlyout');
        var $flyoutContent = $('#megaFlyoutContent');
        var $timer;
        var $flyoutTimer;
        
        // Hovering over the link
        // - populates the flyout with dropdown menu of this link
        // - opens up the flyout
        $link.on('mouseover', function() {
            
                // html of main link subnavigation
                var megaMenuLinks = $(this).find('.dropdown-menu').html();
                if (megaMenuLinks != null) {
                    
                    $('#megaFlyoutContent').html('<ul>'+ megaMenuLinks +'</ul>');
                    
                    // Clears the timeout set on the flyout ment
                    // This is needed so the menu doesn't collapse
                    // when you hover on a new top level nav element
                    if($flyoutTimer) {
                        clearTimeout($flyoutTimer);
                        $flyoutTimer = null;
                    }
                    
                    if(!$flyout.hasClass('activeAndIn')) { 
                        // Clear the timer if it's present and start from 0
                        if($timer) {
                            clearTimeout($timer);
                            $timer = null;
                        }
                        // Open the mega menu and add a class on a timer.
                        // This prevents the flyout from happening immediately
                        // on link rollover.
            ...