在使用优雅主题的 Divi 主题的 Wordpress 中，长菜单不显示

Question

我 post 提出这个问题的原因是 Divi theme by Elegant themes for Wordpress.

中的菜单系统存在根本问题

如果您使用的是这个主题，并且菜单很大，您可能运行会遇到问题。这里有2个问题要讨论。

如果任何菜单或子菜单包含的项目太多，超出了屏幕底部，用户将无法看到所有项目，也无法滚动查看这些项目。（见下面的第一个截图）
如果任何菜单或子菜单超出屏幕右侧，它就会被切断（或者用户根本看不到它），并且用户无法滚动查看菜单项（参见第二条）下面的屏幕截图）

我查看了 Elegant Themes 的支持门户，这是一个已知问题。当用户运行进入它时，Elegant Themes 支持似乎只是建议重新做菜单，这样它就没有那么多项目或者项目不会超出屏幕边缘，或者他们给出 css 修复了并非在所有情况下都有效的问题。

对我而言，这些解决方案不是解决方案，因此，我想出了自己的解决方案，适用于我测试过的所有情况。欢迎提出建议，如果其他人有更好的解决方案，请 post它。

（截图一）

（截图二）

Answer 1

修复需要一些 javascript。

您可以使用 wp_enqueue_scripts 挂钩将 javascript 添加到子主题，或者您可以将 javascript 直接添加到电子面板中的主题选项。（要将其添加到电子面板，请转到您的电子面板并单击 "Integration"，然后将以下代码添加到您博客的 head。

以下代码有大量注释，以便您的编码人员可以轻松地了解正在发生的事情以及它是如何工作的。如果您发现任何问题，请告诉我。

<script type="text/javascript">

// Once the document is ready, execute this code
jQuery(document).ready(function(e) {
    'use strict';

    // Set the jQ var to jQuery.
    // You could also use $, but I use jQ... just my preference.
    var jQ = jQuery;

    // Execute the function that fixes the menus
    fixDiviMenus();

    // And whenever the window is resized, re-apply the fixes.
    jQ(window).resize(function() { fixDiviMenus(); });

});

// This variable simply holds a timeout integer.
// It is used so that we don't continually apply the fixes
// over and over as the window is being resized.
var ClFixTimeout;

// This function sets a timeout that fixes the menus
// We set a timeout so that we don't continually apply the fixes
// over and over as the window is being resized.
function fixDiviMenus() {
    "use strict";

    // If the timeout has already been created, clear it
    if (ClFixTimeout) { clearTimeout(ClFixTimeout); }

    // Wait half a second before applying the fixes
    ClFixTimeout = setTimeout(function() { applyDiviMenuFix(); }, 500);
}

// This function actually applies the fixes
function applyDiviMenuFix() {
    'use strict';

    var jQ = jQuery;

    // Get some variables that we use to determine
    // if our menus need fixing
    var windowElem = jQ(window);
    var windowHeight = windowElem.height();
    var windowWidth = windowElem.width();
    var scrollTop = windowElem.scrollTop();

    // If the screen is 980px or less,
    // then the mobile menu is shown. No reconfiguration necessary
    if (windowWidth < 981) { return; }

    // Get all the sub menus
    var subMenus = jQ('ul.sub-menu');

    // Reset the css properties on each sub menu
    // so that we can apply them again if need be.
    subMenus.each(function() {
        var menu = jQ(this);
        menu.css({
            'max-height': '',
            'overflow-y': '',
            'overflow-x': '',
            'margin-left': ''
        });
    });

    // Iterate each sub menu and apply fixes
    subMenus.each(function() {

        var menu = jQ(this);

        // Check to see if this is a mega menu.
        var isMegaMenu = menu.closest('.mega-menu').length > 0;

        // Only the direct sub menu should be considered.
        // All other children of mega menu do not need mods.
        if (isMegaMenu && (!menu.parent().hasClass('mega-menu'))) { return; }

        // Get some values that determine whether our menu
        // will go below the bottom of the screen
        var offset = menu.offset();
        var top = offset.top - scrollTop;
        var height = menu[0].offsetHeight;

        // Set the padding between the bottom of the menu 
        // and the bottom of the page
        // You can adjust this so that your menus go further
        // down or not
        var bottomPadding = 80;

        // Set the maximum height of the menu
        var maxHeight = windowHeight - top - bottomPadding;

        // If it's a mega menu or the menu stretches beyond
        // the bottom of the screen, set max height and overflow
        if (isMegaMenu || height > maxHeight) {
            menu.css({
                'max-height': maxHeight.toString() + 'px',
                'overflow-y': 'auto',
                'overflow-x': 'hidden'
            });
        }

        // If this is a mega menu, we don't need to check if it
        // goes off the right side of the screen
        if (isMegaMenu) { return; }

        // Check for a menu that goes off the right edge of the screen
        var left = offset.left;
        var width = menu[0].offsetWidth;
        var parentMenu = menu.parent().closest('ul');
        var maxLeft = windowWidth - width - 10;

        // If it goes off the edge
        if (left > maxLeft) {

            var marginLeft;

            // If this is a root drop down, simply shift
            // it to the left the correct number of pixels
            if (parentMenu.hasClass('nav')) {
                marginLeft = ( left - maxLeft ) * -1;
            }

            // Otherwise, this is a sub menu, we need to move
            // it to the other side of the parent menu
            else {
                marginLeft = width * 2 * -1;
            }

            // Apply the css to the menu
            menu.css({
                'margin-left': marginLeft.toString() + 'px'
            });

        }
    });
}
</script>

在使用优雅主题的 Divi 主题的 Wordpress 中，长菜单不显示

In Wordpress Using Elegant Theme's Divi Theme, Long menus don't show

wordpress

jquery

wordpress-theming

submenu

drop-down-menu