Hey!
Mam mały problem, ponieważ chciałem zrobić menu hamburgerowe ale podczas animacji icona X leci na pół strony, transition na ul nie działa a dodatkowo pojawia się scroll podczas otwierania menu.
Porównywałem sobie kod z innymi osobami ale nie widzę błędu.
Wiecie co zrobić żeby icona 'X' była w zielonym pasku?
Oraz co w kodzie jest nie tak że pojawia się scroll...
Z góry dziękuję za pomoc!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/488201f8b9.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<button class="burger">
<i class="fa-solid fa-bars"></i>
<i class="fa-solid fa-x hide"></i>
</button>
<ul>
<li><a href="#">O nas</a></li>
<li><a href="#">Produkty</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.burger{
background:none;
font-size: 25px;
border: none;
top: 0;
left: 0;
padding: 10px 20px;
position: absolute;
cursor: pointer;
transition: transform 0.5s;
}
nav ul{
background-color: rgb(176, 214, 198);
height: 100vh;
width: 200px;
position: absolute;
padding-top: 20px;
left: -350px ;
list-style: none;
transition: transform .5s;
}
nav a {
text-decoration: none;
font-size: 20px;
display: block;
padding: 10px 20px;
color: rgb(0, 0, 0);
}
a:hover{
font-weight: bold;
}
.active{
transform: translateX(350px);
}
.hide{
display: none;
}
JS
const burgerbtn = document.querySelector('.burger')
const barsBtn = document.querySelector('.fa-bars')
const XBtn = document.querySelector('.fa-x')
const nav = document.querySelector('nav')
const handle = () => {
burgerbtn.classList.toggle('active')
barsBtn.classList.toggle('hide')
XBtn.classList.toggle('hide')
nav.classList.toggle('active')
}
burgerbtn.addEventListener('click', handle)