Menu hamburgerowe

0

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)
0

Wydaje się, że pomieszałeś transform z transition. Wysuwanie menu zrobione wstępnie tutaj. Zauważ, że w transition podaje się animowaną właściwość CSS. No i jeszcze w Javascript zmieniasz klasę nav, a nie ul, to trzeba ujednolicić.

1 użytkowników online, w tym zalogowanych: 0, gości: 1