多くの作業と、コードの検索と結合を行った後、ようやく溶岩ランプのドロップダウン メニュー ナビゲーションが機能するようになりました (こちらを参照してください: 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 ピクセルの 2 つのナビゲーション スペースが表示されます。1 つ目はハードコーディングされたバージョンで、2 つ目は wp_nav_menu によって生成されます。2 番目のナビゲーションで動作するように CSS を変更したので、上部が少しおかしくなっていますが、「マジック ライン」がナビゲーションの両方のバージョンに従っていることに気付くでしょう。これは興味深いと思いました。動的バージョンより下に取得する方法がわかりません。2 番目の問題は、2 番目のナビゲーションで「保険サービス」にカーソルを合わせると問題なく、「商業保険」にカーソルを合わせると 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);
});
});
})($);
問題は、私がどのように第 2 レベルまたは第 3 レベルをターゲットにしているのかという点にあると思います。
$(".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);
});
とにかく、私は助けに感謝します。私はこれを回避する必要があるので、何か提案があれば遠慮なく言ってください。また、コード スニペットを提供する必要がある場合は、喜んで提供します。このナビゲーションを解決するためのもの。