Question

基本上，我有一个用于生成＆＃34;全宽＆＃34;此外，菜单项使用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);

    });

有什么建议吗？

Answer 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;
}

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

父菜单项偏斜时子菜单中的不良后果？

1 个答案: