navbar / menu główne: problem z rwd

pytanie zadane 15 marca 2020 w Rozwój zawodowy, nauka, praca przez rice Początkujący (440 p.)
edycja 15 marca 2020 przez rice

Witam
Na obecnym etapie swoje projektu stanąłem w miejscu takim że:

Gdy zwijam okno przeglądarki do momentu kiedy ma się włączyć menu mobilne (min-width: 768px) robi mi się taki niepodkradany niepożądany efekt przejścia z menu liniowego na blokowe i zawijanie go do góry - tak chyba najprościej da się to opisać. Może ktoś mi powiedzieć jak ten efekt wyeliminować ?

STRONA

i kod:

HTML

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
    <link rel="stylesheet" href="bootstrap-grid.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <nav>
        <div class="toggler">
            <i class="fas fa-bars menu"></i>
            <i class="far fa-times-circle off"></i>
        </div>
        <div class="navDiv off">
            <ul>
                <li><a href="#">start</a></li>
                <li><a href="#">o mnie</a></li>
                <li><a href="#">małe sukcesy</a></li>
                <li><a href="#">mój pc</a></li>
                <li><a href="#">kontakt</a></li>
            </ul>
        </div>
    </nav>


    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>

</html>

CSS

* {
    margin: 0;
}

nav {
    background-color: gray;
    height: 111px;
}

.toggler {
    position: fixed;
    top: 30px;
    right: 30px;
    font-size: 50px;
    z-index: 1;
    color: red;
    display: block;
}

ul li {
    list-style: none;
}

ul li a {
    text-decoration: none;
}

div.navDiv {
    padding-top: 44px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 30vh;
    background-color: gray;
    transition: .2s linear;
}

i.off {
    display: none;
}

div.off {
    top: -400px;
}

@media (min-width: 768px) {
    .toggler {
        display: none;
    }

    div.off {
        top: 0;
    }

    div.navDiv {
        padding: 0;
        height: 0;
    }

    ul li {
        display: inline-block;
    }
}

JavaScript / jQuery

$(".toggler").on("click", function () {
    $(".fas, .far, div.navDiv").toggleClass("off");
})

Dzięki śliczne za pomoc z góry jak i wszelkie rady.

Pozdrawiam - P

komentarz 15 marca 2020 przez pablop76 VIP (123,180 p.)

Nie rozumiem pytania :(

niepodkradany efekt przejścia

Poza tym widziałeś urządzenie, które się kurczy i rozciąga?

komentarz 15 marca 2020 przez rice Początkujący (440 p.)

chodzi o to że menu wygląda tak:

Gdy skaluje okno (chodzi tu o szerokość) w pewnym momencie robi się coś takiego (nie jest to uciążliwe bo znika ale nie cieszy oka):

Po czym menu wygląda już tak jak powinno. Czyli tak:

Chciałbym wyeliminować efekt z drugiego zrzutu..

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

navbar / menu główne: problem z rwd

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci