当父菜单项倾斜时，子菜单中出现不希望的偏移？答案

【问题标题】：Undesirable offest in sub-menu when parent menu items are skewed?当父菜单项倾斜时，子菜单中出现不希望的偏移？
【发布时间】：2017-03-14 23:54:41
【问题描述】：

基本上，我有一个用于生成“全角”巨型菜单的插件，此外，菜单项使用 CSS3 2D 转换进行转换：

ul.menu {
     transform: skewX(-30deg);
}

ul.menu > li > ul.sub-menu {
    /* Do not skew sub menus */
    transform: skewX(30deg);
}

问题是不同的子项有不良偏移，我想修复它。

可以在此处查看该错误：https://gyazo.com/d2ab34232904c750fc5e2a59a2807f8d

仅供参考，插件使用JS来确定子菜单的绝对位置，所以我的想法是使用margin-left属性来调整位置，但它没有按预期工作。

$('.fmm-main > li').each(function() {
        var degrees = 30;

        var item = $(this);
        var menu = item.parent();
        var subm = item.children('ul');

        if(!subm.length) return;

        // Convert degrees to radians.
        var menu_radians = degrees * (Math.PI / 180);
        var subm_radians = (degrees / 2) * (Math.PI / 180);

        var menu_h = parseInt(menu.css('height'), 10);
        var subm_h = parseInt(subm.css('height'), 10);

        // We need to factor these in to get an accurate offset.
        subm_h += parseInt(item.css('height'), 10);
        subm_h += parseInt(item.css('padding-top'), 10);
        subm_h += parseInt(item.css('padding-bottom'), 10);
        subm_h += parseInt(subm.css('top'), 10);

        // Get skew offsets.
        var menu_offset = menu_h * Math.atan(menu_radians);
        var subm_offset = subm_h * Math.atan(subm_radians);

        // Put everything together.
        var offset = (subm_offset - menu_offset);

        subm.css('marginLeft', offset);

    });

有什么建议吗？

【问题讨论】：

您能否在代码 sn-p 中提供一个最小的工作示例？如果没有 HTML 和 CSS，就很难看出问题出在哪里。
查看您提供的屏幕截图，在我看来，您可以绝对定位子菜单并一起摆脱这些计算。你有什么理由不这样做？
看看这个，它可能会有所帮助：developer.mozilla.org/en/docs/Web/CSS/transform-origin .... 我猜你需要它左对齐而不是默认居中
谢谢！实际上，它是一个高级 WP 插件，所以创建小提琴并不容易。无论如何，你可以在这里看到测试环境：wotta.com/jq-wp

标签： javascript jquery css drop-down-menu

【解决方案1】：

我不能 100% 确定您希望菜单在哪里对齐，所以如果需要稍微调整一下，请告诉我。

使用您当前的设计，试试这个 CSS：

ul.menu {
     transform: skewX(-30deg);
     transform-origin: 0 50%;
}

ul.menu > li > ul.sub-menu {
    /* Do not skew sub menus */
    transform: skewX(30deg);
     transform-origin: 0 0;
}

然后，即使在页面边缘，菜单也会位于固定位置，并且倾斜的菜单位于页面中心。

【讨论】：