使用Wordpress製作熔岩燈下拉菜單動態的問題

Question

經過大量的工作和大量的搜索和組合代碼，我終於得到了我的熔岩燈下拉菜單導航工作（看這裏：http://lookseewatch.com/overflowexample/menu.html）。大。

下面是問題：我不能爲我的生活得到它與Wordpress菜單（wp_nav_menu）的工作。我一直無法讓wp_nav_menu生成與當前硬編碼相同的標記。我也需要這個<div id="box"><div class="head"></div></div> INSIDE的「<ul class="nav">.」wp_nav_menu不允許我這樣做，因爲它會生成包含ul類等等。

因此，經過幾個小時的嘗試不同的事情，我只是無法得到它。如果你去這裏http://lookseewatch.com/independentinsurance/你會看到兩個導航空間大約300像素。第一個是硬編碼版本，第二個是由wp_nav_menu生成的。我已經改變了CSS來使用第二個導航，所以頂部有點有趣，但是你會注意到「魔術線」跟在兩個導航版本之後，我認爲這很有趣。我只是不知道如何在動態版本下獲取它。第二個問題是，當您在第二次導航上懸停在「保險服務」上時，一切正常，然後您將鼠標懸停在「商業保險」上，然後出現3個新的下拉菜單，當您懸停或點擊其中一個選項時，它們很快消失。我不知道爲什麼。

這裏與我如何針對第二或第三層次爲我navigation.js

var speed = 400;//speed of lava lamp 
var menuFadeIn = 0;//speed of menu fade in transition 
var menuFadeOut = 0;//speed of menu fade in transition 
var style = 'easeOutQuart';//style of lava lamp 
var totalWidth = 0;//variable for calculating total width of menu according to how many li's there are 
var reducedWidth = 4; 
(function($) { 
$(document).ready(function(){ 

    if($.browser.opera){ 
     $(".nav ul").css("margin-top", "32px");//opera fix for margin top 
     $(".nav ul ul").css("margin-top", "-20px"); 
    } 
    if(!$.browser.msie){// ie fix 
     $("ul.nav span").css("opacity", "0"); 
     $(".nav ul ul ul").css("margin-top", "-20px"); 
    } 
    if($.browser.msie){ 
     $("ul.nav span").css({visibility:"hidden"}); 
    } 
     //totalWidth = $(".nav li:last").offset().left - $(".nav li:first").offset().left + $(".nav li:last").width();//width of menu 
     //$(".nav").css({width:totalWidth});//setting total width of menu 

     var dLeft = $('.current-menu-item a').offset().left+15;//setting default position of menu 
     var dWidth = $('.current-menu-item a').width(); 
     var dTop = $('.current-menu-item a').offset().top; 

     //var origLeft = .data($dLeft.offset().left+14); 
     //var origWidth = .data($dWidth.width()); 
     //var origTop = .data($dTop.offset().top); 

     //Set the initial lava lamp position and width 
     $('#box').css({left:dLeft}); 
     $('#box').css({top: dTop}); 
     $('#box').css({width: dWidth}); 



    $(".nav > li").hover(function(){ 
     var position = $(this).offset().left+15;//set width and position of lava lamp 
     var width = $(this).width()-29; 
     if(!$.browser.msie){//hover effect of triangle (glow) 
      $(this).find('span:first').stop().animate({opacity: 1}, 'slow'); 
     } 
     else{ 
      $(this).find('span:first').css({visibility:"visible"}); 
     } 
     $('#box').stop().animate({left:position, width:width},{duration:speed, easing: style}); 
     }, function() { 
      $('#box').stop().animate({left:dLeft, width:dWidth},{duration:speed, easing: style}); 
     }, 

     function(){ 
     if(!$.browser.msie){ 
      $(this).find('span:first').stop().animate({opacity: 0}, 'slow');//hiding the glow on mouseout 
     } 

     if($.browser.msie){ 
      $(this).find('span:first').css({visibility:"hidden"});  
     }   
    }); 



    $(".nav li").hover(function(){//animating the fade in and fade out of submenus level 1 
      $(this).find('li').fadeIn(menuFadeIn); 
      $('li li li').css({display:"none"}); 
      }, 
      function(){ 
       $(this).find('li').fadeOut(menuFadeIn); 
      }); 

      $(".submenu0 li").hover(function(){//animating the fade in and fade out of submenus level 2 
       $(this).find('li').fadeIn(menuFadeIn); 
       $('li li li li').css({display:"none"}); 

      }, 
      function(){ 
       $(this).find('li').fadeOut(menuFadeOut); 

      }); 
      $(".submenu1 li").hover(function(){//animating the fade in and fade out of submenus level 3 
      $(this).find('li').fadeIn(menuFadeIn); 
      }, 
      function(){ 
       $(this).find('li').fadeOut(menuFadeOut); 


      }); 


}); 

})($); 

的代碼，我認爲問題就出在這個區域。

  $(".submenu0 li").hover(function(){//animating the fade in and fade out of submenus level 2 
      $(this).find('li').fadeIn(menuFadeIn); 
      $('li li li li').css({display:"none"}); 

     }, 
     function(){ 
      $(this).find('li').fadeOut(menuFadeOut); 

     }); 
     $(".submenu1 li").hover(function(){//animating the fade in and fade out of submenus level 3 
     $(this).find('li').fadeIn(menuFadeIn); 
     }, 
     function(){ 
      $(this).find('li').fadeOut(menuFadeOut); 


     }); 

無論如何，我感謝幫助。我需要爲此找出解決辦法，所以如果您有任何建議，請隨時發表。另外，如果我需要提供任何代碼片段，我很樂意。任何解決這個導航。

Answer 1

好的，所以你需要的是Wordpress Codex。在wp_nav_menu()函數（found here）的默認值數組中，您可以看到有一個選項items_wrap。使用此我們可以添加您的div到菜單的末尾：

<?php wp_nav_menu(array('items_wrap' => '<ul class="%2$s">%3$s<div id="box"><div class="head"></div></div></ul>')); ?> 

---編輯---

好似乎是與你的子菜單懸停的問題是這一行：

$('li li li').css({display:"none"});

我帶着在這裏您的問題創造的jsfiddle的自由：http://jsfiddle.net/zAqct/正如你可以看到有問題的行註釋掉和懸停似乎再次合作。顯然這不是100％，所以我製作了一個更簡單的測試用例。

---第二屆EDIT ---

確定，所以在進一步研究我認爲主要的問題是你的CSS和JS被證明是有點過於複雜。爲了說明更簡單的方法，我更新了jsFiddle：http://jsfiddle.net/zAqct/2/

您應該發現此版本的工作方式更符合您的需要。