Responsive multicolumn flyout menu using jquery

Question

I would like to create a responsive multicolumn menu like the one used on http://www.indochino.com, does anyone know how to do? my starting point should be this script:http://codepen.io/bradfrost/pen/IEBrz

thank you very much, Giorgio

Answer 1

Have a look at the jQuery methods .hover, .mousein, .mouseout, .mouseenter, and .mouseleave.

What you will what to do is use one of jQuery's .css, '.animate`, etc. methods to show/hide the menu when the user's mouse goes over the navigation link. When their mouse leaves both the navigation link AND the menu you will want to use a method again (likely the same as before) to hide the menu.

Here is an example:

$(document).ready(function() {
    var $navLink = $("#navLink"); //for sake of ease, I will assume you have only one menu, as in the example site
    var $subMenu = $("#subMenu"); // see the above comment

    //global flags
    var overLink = false; 
    var overMenu = false;

    function checkAndHide() {
        if (!overLink && !overMenu) {
            $subMenu.css("display", "none");  

            $subMenu.off("mouseleave.hide");
            $navLink.off("mouseleave.hide");

            $navLink.on("mouseenter.show", function() { 
                overLink = true;
                displayMenu();
            });

        }
    }

    function displayMenu() {
        $subMenu.css("display", "inline-block");

        $navLink.off("mouseenter.show");
        //this is where you have some major implementation decisions
        //for sake of ease, I will simply use some global flags

        $navLink.on("mouseleave.hide", function() { 
            overLink = false;
            checkAndHide(); 
        });
        $subMenu.on("mouseleave.hide", function() {
            overMenu = false; 
            checkAndHide(); 
        });
    };

    $subMenu.on("mouseenter.updateFlag", function() { 
        overMenu = true;
    });

    $navLink.on("mouseenter.updateFlag", function() {
        overLink = true;
    });

});

The above is a very, VERY rough draft of a possible solution. It is not something that you should simply copy and paste, but it should give you an idea of what you should be trying to do. I used a lot of .on and .off calls, as you should do so, as well, in order to save on the overhead of calling handlers that you no longer need. The most important ones, however, are the ones that turn on and off the .mouseenter handler for the $navLink, as you may decide to use (or, in the future, change to) an effect that may be visibly repeated on an element (like sliding, and then sliding down again). In my example, this is not very important, but it may be, based on your implementation.

Good luck! :)