jQuery的懸停滑動水平和垂直菜單

我創建了一個jQuery的onHover選項垂直滑動菜單欄現在我需要實現橫向滑動也是我面臨的一些問題，它不是水平來jQuery的懸停滑動水平和垂直菜單

我創建了一個演示造型在jsfiddle link to demo

懸停在'管理'在垂直slidedown菜單有查找管理菜單下有2個子菜單（嗨和你好），我想水平滑動但無法這樣做，似乎有一些問題的JavaScript可以有人幫我出

t他JavaScript是這裏

var menuShowDelay = 500; 
var menuHoverTimer = null; 
$(function() { 
    bindMenuSliding(); 
}); 

function bindMenuSliding() { 
    // Expand menu on mouse over. 
    $('.ulMiddleMenu li').hover(function() { 
     // Clear previous mouse hover timer. 
     if (menuHoverTimer) { 
      clearTimeout(menuHoverTimer); 
      menuHoverTimer = null; 
     } 



     var targetElement = $(this); // Get the target element. 

     // Display the menu after a certain time interval. 
     menuHoverTimer = setTimeout(function() { 
      targetElement.parent('ul').find('ul').stop(true, true).css('display', 'none'); 
      targetElement.find('ul').slideDown('medium'); 
     }, menuShowDelay); 
    }, 
    function() { 
     // Clear previous mouse hover timer. 
     if (menuHoverTimer) { 
      clearTimeout(menuHoverTimer); 
      menuHoverTimer = null; 
     } 

     // Hide the menu. 
     $(this).find('ul').slideUp('fast'); 
    }); 
}

您可以複製在的jsfiddle

來源

2012-01-23 Mac

兩個主要問題的JavaScript面板粘貼此。其一，你展示了懸停的所有子菜單，而不僅僅是孩子。二，你沒有邏輯來區分導航的級別，所以沒有辦法期望低級別的行爲有所不同。

// Display the menu after a certain time interval. 
menuHoverTimer = setTimeout(function() { 
    var $parent = targetElement.parent('ul'); 
    $parent.find('ul').stop(true, true).hide(); 
    //test for first level nav 
    if($parent.hasClass("ulMiddleMenu")){ 
     targetElement.children('ul').slideDown('medium'); 
    }else{ 
     targetElement.find('ul').width(0).show().animate({width:'100%'},1000); 
    } 

}, menuShowDelay);

jsFiddle。這仍然留下一些問題讓你在顯示方面進行整理。你應該考慮廢除你的CSS，並從頭開始，因爲它會越來越難以挖掘出你的方式。

來源

2012-01-23 19:51:13 Sinetheta

非常感謝Sinetheta，我仍然無法相信你如何從這樣的混亂中挑選出確切的原因，以上任何方式伴隨着一些CSS變化做了這項工作 – Mac

好聽，最好你想保留所有的css中的表現風格。 – Sinetheta

jQuery的懸停滑動水平和垂直菜單

回答

相關問題