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
