2

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">&times;</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á.

3
  • Vc está usando algum Framework tipo Bootstrap ou algo do tipo?
    – hugocsl
    18/01/2019 às 14:03
  • 1
    Oi hugo, não estou usando nenhum framework. O comando "executar" aqui do stackoverflow nao vai funcionar direito porque o icone é importado do fontawesome e o css nao está linkado. Mas foi a unica maneira que eu consegui importar meu codigo. 18/01/2019 às 14:06
  • Arquivo do Font Awesome adicionado.
    – Woss
    18/01/2019 às 14:21

1 Resposta 1

0

Jovem coloquei ele para funcionar, mas a forma como vc montou o HTML não me agradou muito, pois vc colocou o menu inteiro dentro da outro elemento que deveria ser apenas o background... isso atrapalhou um pouco as coisas.

inserir a descrição da imagem aqui

No HTML não mexi em nada, no CSS tirei o displat:none/block, pois não existe "meio display" se vc quer fazer transições vc precisa usar opacity e margin por exemplo como eu fiz.

Também precisei mexer no JS, como não entendo muito (quase nada na verdade), fiz de um jeito que vai funcionar, mas não sei se é a melhor prática.

Segue o modelo da imagem.

//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.opacity = '1';
  document.querySelector('.navbar__mobile__bg').style.zIndex = "102";
  navbarMobile.style.marginLeft = '0';
}
function closeMenu(){
  document.querySelector('.navbar__mobile__bg').style.opacity = '0';
  document.querySelector('.navbar__mobile__bg').style.zIndex = "100";
  navbarMobile.style.marginLeft = '-350px';
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.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; */
  opacity: 0;
  /* margin-left: -300px; */
  transition: all 500ms;
}

.navbar__mobile {
  /* display: none; */
  opacity: 0.95;
  color: #444;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  height: 100%;
  width: 300px;
  padding-top: 5rem;
  font-size: 1.2rem;
  padding-left: 2rem;
  margin-left: -350px;
  transition: all 500ms;
}

.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;
}
.fas {
  position: relative;
  z-index: 101;
}
<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">&times;</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>

2
  • Hugo, segui a sua recomendação e modifiquei o html da página, removi o "display" e agora a transição está funcionando perfeitamente. Colocar o menu dentro da div do background realmente não foi a melhor opção. Agora consegui entender onde eu errei. Obrigado pela ajuda! 18/01/2019 às 16:37
  • @caiopoyares legal jovem que bom que resolveu ai. Vc está no caminho certo, esses detalhes são normais e é errando que a gente aprende tb, agora vc já sabe como não se deve fazer rss. Boa sorte ai
    – hugocsl
    18/01/2019 às 16:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .