Изменить CSS перед загрузкой элемента

Question

Цель: у меня есть главная панель навигации, которая открывается при нажатии (с использованием jquery и стиля css --active). Если пользователь оставляет его открытым и переходит на новую страницу на сайте, навигационная панель должна оставаться открытой, а не казаться закрытой.

Проблема: панель навигации остается открытой (использует cookie для запоминания своего состояния), но кратко рассматривается в стиле по умолчанию (т.е. закрывается) перед принятием класса --active. Выглядит очень неуклюже, как быстрая вспышка.

Может кто-нибудь придумать, как заставить навигационную панель запоминать свое состояние со страницы на страницу И (когда cookie «открыт») использовать стили класса --active без краткого отображения стилей по умолчанию?

(Я смотрел на Как изменить свойство CSS до создания элемента? , но у меня это не работает).

$(document).ready(function() {
  const menuButton = $('.header__menu-button');
  const menuState = Cookies.get('menuState');

  if (menuState == 'opened') {
    menuButton.addClass('--active');
  };

  menuButton.on('click', function() {
    $(this).toggleClass('--active');

    if (menuButton.hasClass('--active')) {
      Cookies.set('menuState', 'opened');
    } else {
      Cookies.set('menuState', 'closed');
    }
  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #dcdcdc;
}

.header {
  height: 110px;
  background-color: #add8e6;
}

.header__button-container {
  display: flex;
  justify-content: flex-end;
}

.header__menu-button {
  min-width: 100px;
  height: 110px;
  background-color: #fff;
  color: #000;
}

.menuTransition {
  transition: all 1s ease-in-out;
}

.header__menu-button.--active {
  min-width: 250px;
  background-color: #000;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  <div class="header__button-container">
    <button class="header__menu-button menuTransition"></button>
  </div>
</div>

Answer 1

Если в новой странице меню было --active, используйте этот код до $(document).ready(function()

$("button.header__menu-button").removeClass("--active");

Этот код удаляет класс --active из вашей панели навигации! Прежде чем увидеть страницу.

$(document).ready(function() {
  $("button.header__menu-button").click(function() {
    $(this).toggleClass("--active");
  })
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #dcdcdc;
}

.header {
  height: 110px;
  background-color: #add8e6;
}

.header__button-container {
  display: flex;
  justify-content: flex-end;
}

.header__menu-button {
  min-width: 100px;
  height: 110px;
  background-color: #fff;
  color: #000;
}

.menuTransition {
  transition: all 1s ease-in-out;
}

.header__menu-button.--active {
  min-width: 250px;
  background-color: #000;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<div class="header">
  <div class="header__button-container">
    <button class="header__menu-button menuTransition"></button>
  </div>
</div>