How to get spacing between menu items in js?

  • 0
    Help with a difficult task, there are two menus, on js the width of the first menu items is assigned to the second menu items so that they are the same width.
    Here's a live example.


    But now how to make the blocks of the second menu stretch over the ALL FREE AREA on the right?
    As I understand it, you need to get the total width of the first menu, divide by the number of menu items, and subtract the width of each item, and what remains to add equally to the width of each item in the second menu.
    For me, this is already difficult mathematics, please help.

    And here's how it should be in the end.
    JavaScript Ariana Baxter, Aug 13, 2020

  • 3 Answers
  • 0
    The solution is to shift the distance between the items of the first menu by a free distance.

    function Menu() {
    var menu = $('#...'),
    menu_children = menu.children(),
    submenu = $('#...'),
    submenu_children = submenu.children();
    menu_children.each(function (i, v) {
    var next = $(this).next();
    if(next.length != 0){
    $(submenu_children[i]).css({'width': $(this).next().position().left - $(this).position().left});
    }
    else {
    $(submenu_children[i]).css({'width': $(this).width()});
    }
    });
    }
    Emma Moody

  • 0
    JS is no longer relevant for such things ...





    Info FLEX CSS first & amp; second
    Anonymous

  • 0
    A very strange decision, to be honest. This is done with a couple of lines of CSS.
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!