Wordpress 3级水平导航-需要jquery/javascript帮助进行对齐

Wordpress 3 Level horizontal navigation - need jquery / javascript help for alignment

本文关键字：帮助 javascript 对齐 jquery 水平 3级 导航 需要 Wordpress      更新时间：2023-09-26

我一直在尝试实现3级水平导航，但我被最后一级卡住了。我必须在最后一级使用绝对位置，因为使其相对会将菜单项宽度绑定到父级的宽度，父级是第二级中的菜单项。

我对javascript/jquery不是很熟悉，但我想确保子元素始终位于父元素之下。

http://generatedesignstaging.com/safari/safaris/value-safaris/the-beast-retreat/

这就是我想到的，它运行得很好。

jQuery(function($) {
    $(window).on('resize', function() {
    var submenu = jQuery('#top-menu').position().top+jQuery('#top-menu').outerHeight(true);
      jQuery('.sub-menu').css('top',submenu);
/** 3rd level navigation top position **/ 
var height_sm = jQuery('#top-menu').find('.sub-menu').outerHeight();
jQuery('.menu-item .menu-item > .sub-menu').css('top', height_sm);   
/** Maximum width of the page **/  
var container = $('#page-container').width(); 
/** Compute horizontal position of the 3rd menu **/ 
$('#top-menu').find('.sub-menu .menu-item-has-children').each(function() { 
    var item = $(this).children('.sub-menu').width(); 
    var position = $(this).position();
    var total = item + position.left; 
    if (total > container){
        var ofset = total-container; 
        var calc = position.left - ofset;  
        $(this).children('.sub-menu').css('left',calc);
    }
    else{
    $(this).children('.sub-menu').css('left',position.left);
}
}); 
    }).trigger('resize');
});
相关文章：