Отзывчивое многоколонное всплывающее меню с использованием jquery

Question

Я хотел бы создать отзывчивое многоколоночное меню, подобное тому, которое используется на http://www.indochino.com. Кто-нибудь знает, как это сделать? моей отправной точкой должен быть этот скрипт: http://codepen.io/bradfrost/pen/IEBrz

большое спасибо, Giorgio

Answer 1

Посмотрите на методы JQuery .hover, .mousein, .mouseout, .mouseenter и .mouseleave.

Что вы будете делать, это использовать один из методов jQuery's .css, '.animate` и т. Д., Чтобы показать/скрыть меню, когда мышь пользователя проходит по ссылке навигации. Когда их мышь оставляет и навигационную ссылку И меню, вы захотите снова использовать метод (вероятно, такой же, как и раньше), чтобы скрыть меню.

Вот пример:

$(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; 
    }); 

}); 

выше очень, очень грубый проект возможного решения. Это не то, что вам нужно просто скопировать и вставить, но это должно дать вам представление о том, что вы должны пытаться сделать. Я использовал много .on и .off звонков, так же как вы должны это сделать, чтобы сохранить накладные расходы обработчиков вызовов, которые вам больше не нужны. Наиболее важными из них являются те, которые включают и выключают обработчик .mouseenter для $navLink, так как вы можете решить (или, в будущем, изменить) эффект, который может быть заметно повторен на элементе (например, скольжение, а затем сползание снова). В моем примере это не очень важно, но может быть, на основе вашей реализации.

Удачи вам! :)