Transition in mobile menu not working

Question

Transition in mobile menu not working

Asked 5 years, 10 months ago

Viewed 71 times

2

I’m having problems regarding the transition from my mobile menu (hamburger menu). The menu is working perfectly, when I click on the menu icon, it appears on the left side of the page. The problem is that I can’t make the transition work, I mean, I’d like it to "slide" from the left corner of the page to the final position. For that I have already tried to put Transition both on the property width how much on the property margin-left (negative margin), but I was unsuccessful.

//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>

If anyone can point me in the wrong direction, I’d appreciate it.

You are using some Bootstrap framework or something?

– hugocsl

2019/01/18 at 14:03
1

Hi Ugo, , I’m not using any framework. The "run" command here from stackoverflow will not work right because the icon is imported from the fontawesome and the css is not linked. But it was the only way I could import my code.

– caiopoyares

2019/01/18 at 14:06
Font Awesome file added.

– Woss

2019/01/18 at 14:21

1 answer

Browser other questions tagged css mobile

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-01-18T14:59:31+00:00

Young I put it to work, but the way you set up the HTML did not please me very much, because you put the entire menu inside the other element that should be only the background... this messed things up a little.

In HTML I didn’t touch anything, in CSS I took displat:none/block, because there is no "half display" if you want to make transitions you need to use opacity and margin for example as I did.

I also had to touch the JS, as I do not understand much (almost nothing really), I did it in a way that will work, but I do not know if it is the best practice.

Follow the image model.

//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>