Delay co drugie kliknięcie

Cześć, robię menu na stronę i przez jego specyfikę potrzebuję dodać display: none do footera podczas gdy menu jest otwarte. Animacja menu trwa 0.4s więc jak menu zaczyna wjeżdżać na stronę potrzebuję opóźnić display: none o 0.4s a w momencie gdy menu się zamyka potrzebuję, aby nie było tego dealeya 0.4s bo widać pustą stronę do momentu aż menu się nie zamknie.

Czy da się jakoś zrobić delay co drugie kliknięcie dodając coś do tego mojego js czy lepiej zrobić funkcję, która sprawdza jaka jest ustawiona klasa button class="hambuger" czy button class="hamburger.is-active"

        <button class="hamburger" onclick="window.scrollTo({ top: 0, behavior: 'smooth' }); display_delay();">
            <div class="bar"></div>
        </button>

            function display_delay(){
                setTimeout(() => {
                document.getElementById('ft_display').style.display = document.getElementById('ft_display').style.display == 'none' ? 'block' : 'none';
                }, 400);
            };

Dla podglądu dodaje ss z tego jak wygląda kod przy zamkniętym i otwartym menu.

ZeuberO napisał(a):

czy lepiej zrobić funkcję, która sprawdza jaka jest ustawiona klasa button class="hambuger" czy button class="hamburger.is-active"

tak

@ZeuberO: Musisz mieć jakąś flagę, która powie Ci, czy menu jest wyświetlane czy nie. Możesz używać w tym przypadku albo wartości CSS albo klasy, ale moim zdaniem lepiej zrobić to za pomocą zmiennej. HTML/CSS nie służą do przechowywania informacji. Tak więc tworzysz sobie zmienną menuFlag, której początkowo nadajesz wartość np. false (jeśli domyślnie menu ma być schowane). Następnie w funkcji display_delay sprawdzasz wartość tej flagi. Jeśli jest false (menu jest schowane), uruchom odpowiedni kod z timeout, jeśli true (menu jest wyświetlane) - uruchom bez timeout.

Możliwe, że mamy tutaj do czynienia z problemem XY. Możliwe, że Twój problem da się rozwiązać przy pomocy samego CSS. Pokaż więcej kodu, opowiedz dlaczego footer trzeba chować to może znajdziemy jakieś inne rozwiązanie.

@Gouda105: Przerabiam stare menu na bardziej rozbudowane. Problemem tego menu jest fakt, że do prawidłowego działania potrzebne jest mu position: fixed a do mojego zastosowania potrzebuję position: absolute ze względu że po wybraniu kafelka będzie się otwierała lista podkategorii a w position: fixed wszystko co jest poniżej 100vh nie zobaczymy bo się nie da przesunąć w dół (overflow nie działa), a footer dla tego potrzebuję wyłączyć bo przy position: absolute wygląda to tak

Chyba, że da się jakoś ograniczyć wysokość strony do tego co określa <nav class="mobile-nav is-active"> a wszystko poniżej zostaje usunięte/wyłączone

Tak prezentuje się css

.hamburger
{
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 20px;
    position: relative;
    display: block;
    width: 35px;
    height: 35px;
    cursor: pointer;
    z-index: 99;

    appearance: none;
    background: none;
    outline: none;
    border: none;
}
.hamburger .bar, .hamburger::after, .hamburger::before
{
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fff;
    margin: 6px 0px;
    transition: 0.4s;
}
.hamburger.is-active::before
{
    transform: rotate(-45deg) translate(-7px, 6px);
}
.hamburger.is-active::after
{
    transform: rotate(45deg) translate(-6px, -6px);
}
.hamburger.is-active .bar
{
    opacity: 0;
}
.mobile-nav
{
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    min-height: 100vh;
    display: block;
    z-index: 98;
    background-color: rgba(10, 10, 10);
    transition: 0.4s;
}
.mobile-nav ul
{
    display: flex;
    flex-wrap: wrap;
    padding-top: 150px;
    padding-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
}
.mobile-nav li
{
    width: 50%;
    list-style: none;
    display: flex;
    justify-content: center;
}
.mobile-nav.is-active
{
    left: 0;
    position: absolute;
}
.mobile-nav a 
{
    display: flex;
    width: 100%;
    max-width: 260px;
    height: 80px;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 10px;
    margin-right: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: "Poppins", sans-serif;
    text-align: center;
    padding: 8px 16px;
    background-color: #323232;
    border-radius: 8px;

    color: #fff;
    text-decoration: none;
}
.mobile-nav a i
{
    font-size: 22px;
    padding-bottom: 5px;
}
.mobile-nav li:last-child
{
    width: 100%;
}
.mobile-nav li:last-child a
{
    max-width: 100%;
}
.mobile-nav a:hover
{
    background-color: #cc0000;
}

@ZeuberO: Prawidłowe funkcjonowanie to jakie, a jakie jest Twoje zastosowanie?
Słabo opisałeś problem nie do końca wiem co chcesz osiągnąć. W dodatku screenshot jest dziwnie przycięty i połowę menu tylko widać.

@Gouda105: Jak otworzysz menu to będziesz miał do wyboru kafelki, większość z nich od razu będzie przekierowywało do danej strony, lecz problem się zaczyna z ilością podstron, które ma teamspeak3. jeżeli menu ma position: fixed i otworzę zakładkę teamspeak3 to ilość podstron do wyświetlenia przewyższa 100vh (852px) i nie działa overflow bo menu jest przyklejone do ekranu, dlatego potrzebuję position: absolute, żeby można było scrollować menu w dół. Dodaje ss podglądowe (drugie menu z listą jest jeszcze nie zrobione więc daje jak wygląda menu normalne, nie mobilne)

@ZeuberO: Myślałeś nad overflow-y: scroll?