Как убрать моргание при resize?

Question

[Mesuti]

Привет!
Скрипт для динамического меню (разное количество пунктов)

Если меню не влазит (шире контейнера) - активирует мобильный вид.
Если меню влазит (ýже контейнера) - убирает мобильный вид.

Как убрать мелькание?
Или как в таком случае будет правильней написать скрипт для динамического меню?

window.onload = mobileMenu; // проверка при загрузке страницы
window.addEventListener('resize', mobileMenu); // проверка при изменении ширины

function mobileMenu() {
    // Сравнение ширины контейнера и ширины меню
    if (сontainer.offsetWidth < nav.offsetWidth) {
       // активируем мобильный вид
        body.classList.add('mobile')
    } else {
       // убираем мобильный вид
        body.classList.remove('mobile')
    }
}

p.s.

Весь код верстки

<style>
    *,
    :after,
    :before {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    :focus {
        outline: none
    }

    .headerWrapper {
        padding: 0;
        margin: 0;
        background-color: #f2f2f2
    }

    p {
        color: #000
    }

    ul {
        list-style: none
    }

    a {
        color: inherit;
        text-decoration: none
    }

    .btn,
    a {
        cursor: pointer
    }

    .btn {
        color: #838b93;
        padding: 5px 16px 4px;
        margin: 0;
        height: 32px;
        background-color: #fff;
    }

    .btn,
    .btn:hover {
        -webkit-transition: all .3s;
        transition: all .3s
    }

    .btn:hover {
        color: #485d67;
    }

    .container {
        height: 100%;
        max-width: 960px;
        padding: 0 15px;
        margin: 0 auto;
        position: relative
    }

    .header {
        display: block;
        width: 100%;
        height: 40px;
        padding: 0;
        margin: 0;
        position: relative;
        background-color: #fff;
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
    }

    .header .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .header .container nav {
        margin-left: auto
    }

    .header ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        height: 100%;
        width: 100%;
        color: #838b93;
        padding: 0;
        margin-right: 20px
    }

    .header ul li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 100%;
        -webkit-box-flex: 0;
        -ms-flex: 0;
        flex: 0;
        padding: 5px 14px
    }

    .header ul li:hover {
        cursor: pointer;
        color: #485d67
    }

    .header .logo {
        display: block;
        min-width: 105px;
        font-weight: 700;
        font-size: 20px;
        color: #444
    }

    .header .logo span {}

    .mobile .btn {
        margin-right: 0
    }

    .mobile .header nav {
        display: none;
        position: absolute;
        top: 40px;
        right: 0;
        background-color: #fff
    }

    .mobile .header nav ul {
        display: block;
        margin-top: 0;
        margin-bottom: 0;
        -webkit-box-shadow: -2px 2px 4px rgba(0, 0, 0, .1);
        box-shadow: -2px 2px 4px rgba(0, 0, 0, .1)
    }

    .mobile .header nav ul li {
        display: block;
        padding: 10px;
        border-left: 2px solid transparent
    }

    .mobile .header nav ul li:hover {
        background-color: #f2f2f2;
        border-left: 2px solid #838b93
    }

    .mobile .header .active {
        display: block
    }

    .mobile .gamburger-wrapper {
        display: block;
        cursor: pointer;
        height: 30px;
        width: 30px;
        position: relative
    }

    .mobile .gamburger {
        display: block;
        width: 30px;
        height: 3px;
        background-color: #777;
        position: absolute;
        top: 45%;
        left: 0
    }

    .mobile .gamburger:after {
        top: 7px
    }

    .mobile .gamburger:after,
    .mobile .gamburger:before {
        content: "";
        display: block;
        width: 30px;
        height: 3px;
        position: absolute;
        background-color: #777;
        left: 0
    }

    .mobile .gamburger:before {
        bottom: 7px
    }

</style>


<div class="header-wrapper">
    <div class="header">
        <div class="container">
            <div class="logo">
                <span>Лого</span>
            </div>
            <nav>
                <ul>
                    <li><a href="#">Меню1</a></li>
                    <li><a href="#">Меню2</a></li>
                    <li><a href="#">Меню3</a></li>
                    <li><a href="#">Меню4</a></li>
                </ul>
            </nav>
            <button class="btn">Кнопка</button>
            <div class="gamburger-wrapper">
                <div class="gamburger"></div>
            </div>
        </div>
    </div>
</div>

<script>
    var headerWrapper = document.querySelector('.header-wrapper'),
        headerContainer = document.querySelector('.header .container'),
        logo = document.querySelector('.logo'),
        nav = document.querySelector('nav'),
        headerBtn = document.querySelector('.header .btn'),
        gamburger = document.querySelector('.gamburger-wrapper');

    
    window.onload = mobileMenu; // Сравниваем ширину при загрузке
    window.addEventListener('resize', mobileMenu); // Сравниваем ширину при загрузке

    
    function mobileMenu() {
        // Если ширина контейнера меньше, чем сумма ширин блоков
        if (headerContainer.offsetWidth < (logo.offsetWidth + nav.offsetWidth + headerBtn.offsetWidth)) {
            
            // true - активируем мобильный вид
            headerWrapper.classList.add('mobile')
            
            // false - убираем мобильный вид
        } else {
            headerWrapper.classList.remove('mobile')
        }
    }

    
    // Нажатие на гамбургер меню
    gamburger.addEventListener('click', () => {
        nav.classList.toggle('active')
    })

</script>

файл с версткой https://yadi.sk/d/UKDYOJpPczu8FQ
Не смогу разобраться, как активировать ресайз в песочнице.

Comments

[poniyur]

думаю, такие вещи лучше делать на css, без js (привет медиазапросы)

[Mesuti]

poniyur, с помощью медиазон можно сделать проверку влезает ли блок при изменении ширины окна? Насколько понимаю, там можно только задать конкретное значение ширины, при которой будет эффект. Но в текущей задаче рассматривается вариант динамического меню (сегодня 2 пункта, завтра 10) и ресайз окна браузера

[VegasChickiChicki]

Mesuti, Покажите css код классов которые добавляете\убираете, может в стилях дело?

[Rustam Bainazarov]

Mesuti, сделайте пример в песочнице, тогда можно будет подумать, как решить данную проблему.

[Mesuti]

Рустам Байназаров, Спасибо за ответ. Добавил пример верстки

[poniyur]

Mesuti, да, но лично я бы делал меню мобильным, когда ширина окна явно мобильная (меньше 1000) , а не привязывался бы прям к точному значению, когда меню перестаёт влезать (обычно бы я бы так и сделал, но вы говорите, что у вас меню будет часто менятся).
Ну да ладно, проблему вы решили, уже здорово.

Answer 1

[Mesuti]

Ответ StackOverFlow

Answer 2

[Robur]

У вас ширина контейнера зависит от того свернули вы его или нет.
Получается так:
- длинное меню
- поменяли размер экрана. контейнер не влез, свернули меню
- меню короткое
- поменяли размер экрана еще раз. Контейнер свернут - отлично влезает, разворачиваем.
- длинное меню
- повторяем все сначала

соответственно при каждом следующем вызове mobileMenu он то сворачивается то разворачивается.

ошибка в том что вы берете текущий размер контейнера чтобы понять влезает он или нет, а вам надо всегда сравнивать с "развернутым" вариантом. Сделать можно по разному, самый простой вариант - запоминать размер в самом же ресайзе в тот момент когда он развернут