Как скрывать лишние пункты меню, которые не вписываются по ширине без лагов при обновлении страницы?

Question

[Сергей Арсентьев]

Есть страница https://vsemesta.net/tmp/home.html
В ней центральное меню, можно ли как-то без кардинальной переделки текущей структуры меню, сделать на css или js так, чтобы при обновлении страницы по F5 они не дергались?

В ff например вот так дергаются через раз https://gyazo.com/def9cb9e12ed824b30be93dbaf63a6de, то есть чуть покажется вторая строка, потом схлопнется...

Скрипт на js он там сразу под меню идет, виден в исходном коде, привожу и сюда

spoiler

<script>                                  
                                function menuDotts() {
                                    if (window.innerWidth > 1023.98) {
                                        let enumeration = [];
                                        const menuItem = document.querySelector('.menu__list').children;
                                        const menu = document.querySelector('.menu');
                                        const menuWidth = menu.offsetWidth;
                                        const menuBody = document.querySelector('.menu__body');
                                        let left = 110;

                                        Array.from(menuItem).forEach(function (item, i, menuItem) {
                                            let width = item.clientWidth;
                                            left += width;

                                            if (window.innerWidth > 1023.98 && window.innerWidth < 1365.98) {
                                                left += 12;
                                            } else
                                            if (window.innerWidth > 1365.98 && window.innerWidth < 1919.98) {
                                                left += 16;
                                            } else if (window.innerWidth > 1919.98) {
                                                left += 50;
                                            }
                                            if (menuWidth < left) {
                                                enumeration.push(item);
                                            };
                                        });
                                        if (menuWidth < left) {
                                            menuBody.insertAdjacentHTML("beforeend",
                                                '<div class="menu__more popup"><div class="menu__more-btn">...</div><ul class="menu__list"></ul></div>'
                                                );
                                        }
                                        const more = document.querySelector('.menu__more>.menu__list');
                                        for (let i = 0; i < enumeration.length; i++) {
                                            more.append(enumeration[i]);
                                        }
                                    }
                                }
                                menuDotts();
                            </script>

Answer 1

[San Taganeiro]

Для начала нужно добавить критикал css, чтобы подкачать шрифты.
Страница дергается т.к. изменяются отступы, размеры блоков. Первое что я увидел это изменение размера номера телефона в шапке. Он с 2х строчек превратился в 1

Comments

[San Taganeiro]

Если стоит задача убрать лишние пункты, то в js находите ширину обертки меню в px, ширину пунктов меню и выпиливаете по 1му, пока общая ширина не будет <= ширине обертки

[Сергей Арсентьев]

San Taganeiro, спасибо, сейчас она так и работает, просто при обновлении страницы в FF иногда проскакивает вторая строка, а потом скрывается. Вот об этом проскакивании и речь )