Estou com problemas em relação a transição do meu menu mobile (menu hamburger). O menu está funcionando perfeitamente, quando eu clico no icone de menu, o mesmo aparece do lado esquerdo da página. O problema é que não consigo fazer com que a transição funcione, ou seja, gostaria que, quando ativado, ele "deslizasse" do canto esquerdo da página até a posição final. Para isso já tentei colocar a transition tanto na propriedade width
quanto na propriedade margin-left
(margem negativa), mas não tive sucesso.
//selecting elements
let openButton = document.querySelector('.fa-bars');
let closeButton = document.querySelector('.close-button');
let navbarMobile = document.querySelector('.navbar__mobile');
//open menu
openButton.addEventListener('click', openMenu);
//close menu
closeButton.addEventListener('click', closeMenu);
//defining the functions
function openMenu(){
document.querySelector('.navbar__mobile__bg').style.display = 'block';
navbarMobile.style.display = 'block';
navbarMobile.style.marginLeft = '0';
}
function closeMenu(){
document.querySelector('.navbar__mobile__bg').style.display = 'none';
navbarMobile.style.display = 'none';
navbarMobile.style.marginLeft = '-300px';
}
.navbar__mobile__logo {
font-family: 'Aladin';
font-size: 2.5rem;
color: #edb306;
position: absolute;
top: 10px;
left: 32px;
}
.navbar__mobile__bg {
background-color: rgba(0,0,0,.6);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
display: none;
}
.navbar__mobile {
display: none;
color: #444;
position: fixed;
top: 0;
left: 0;
background-color: #fff;
height: 100%;
width: 300px;
opacity: .95;
padding-top: 5rem;
font-size: 1.2rem;
padding-left: 2rem;
margin-left: -300px;
transition: margin-left 1s;
}
.navbar__mobile__item {
padding: 1.2rem 0 1.2rem 0;
}
.close-button {
cursor: pointer;
position: absolute;
font-size: 2.5rem;
padding-right: 1rem;
color: #edb306;
top: 10px;
right: 0;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<div class="nav-container">
<nav class="main-nav">
<div class="main-nav__logo"><a href="#">Dógui</a></div>
<div class="main-nav__navbar">
<i class="fas fa-bars"></i>
<div class="navbar__mobile__bg">
<ul class="navbar__mobile">
<div class="navbar__mobile__logo">LOGO</div>
<li class="close-button">×</li>
<li class="navbar__mobile__item"><a href="#">Quem somos</a></li>
<li class="navbar__mobile__item dropdown"><a href="#">Serviços<img class="arrow-down__icon" src="img/svg/down-arrow.svg" alt="arrow down"></a>
<ul class="dropdown__list">
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
</ul></li>
<li class="navbar__mobile__item"><a href="#">Equipe</a></li>
<li class="navbar__mobile__item"><a href="#">Contato</a></li>
</ul>
</div>
</div>
</nav>
</div>
Se alguém puder me apontar aonde eu estou errando, agradeço desde já.