使用jquery的響應式多列彈出式菜單

Question

我想創建一個響應式多列菜單，如http://www.indochino.com上使用的菜單，有誰知道該怎麼做？ 我的出發點應該是這個腳本：http://codepen.io/bradfrost/pen/IEBrz

非常感謝你， 喬治

Answer 1

看一看jQuery的方法.hover，.mousein，.mouseout，.mouseenter，並.mouseleave。

當用戶的鼠標滑過導航鏈接時，您將要做什麼是使用jQuery的.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調用，因爲您應該這麼做，以便節省您不再需要的調用處理程序的開銷。然而，最重要的是打開或關閉$navLink的.mouseenter處理程序，因爲您可能決定使用（或將來更改爲）可能在元素上可見地重複的效果（如滑動，然後再次滑下）。在我的例子中，這不是很重要，但它可能是基於你的實現。

祝你好運！ :)