1

经过大量的工作和一大堆的搜索和组合代码,我终于让我的熔岩灯下拉菜单导航工作(看这里: http: //lookseewatch.com/overflowexample/menu.html)。伟大的。

问题是:我一辈子都无法使用 Wordpress 菜单 (wp_nav_menu)。我一直无法让 wp_nav_menu 生成与我当前的硬代码相同的标记。我还需要这个<div id="box"><div class="head"></div></div>INSIDE of " <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); 


        }); 

无论如何,我感谢您的帮助。我需要想办法解决这个问题,所以如果您有任何建议,请随时提出。另外,如果我需要提供任何代码片段,我很乐意提供。任何解决此导航的方法。

4

1 回答 1

0

好的,你需要的可以在Wordpress Codex中找到。在wp_nav_menu()函数的默认值数组中(在此处找到),您可以看到有一个名为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%,所以我制作了一个更简单的测试用例。

--- 第二次编辑 ---

好的,进一步看,我认为主要问题是您的 CSS 和 JS 被证明有点过于复杂。为了说明一个更简单的方法,我在这里更新了 jsFiddle:http: //jsfiddle.net/zAqct/2/

您应该会发现此版本更符合您的需要。

于 2012-12-06T10:37:12.863 回答