I would like to apply an animation in <Nav>. I would like to make it appear by clicking . menu_burger, from left to right

Asked

Viewed 57 times

-1

const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;

menuBtn.addEventListener('click', () =>{
    if(!menuOpen){
        menuBtn.classList.add('open');
        menuOpen = true;
    }else{
        menuBtn.classList.remove('open');
        menuOpen = false;
    }
    
})
html{
    padding: 0;
    margin: 0
}
/* --- NAVBAR --- */
*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
nav{
    height: 100px;
    background: #4747F9;
    border-bottom: 2px solid black;
}
nav img{
    height: 90px;
    width: 90px;
    position: absolute;
    top: 5px;
    left: 8%;
}
nav ul{
    float: right;
    margin-right: 25px;
}
nav ul li{
     display: inline-block;
    line-height: 100px;
    margin: 0 20px;
}
nav ul li a{
    color: white;
    position: relative;
    font-size: 18px;
    text-transform: uppercase;
    padding: 5px 0;
}
nav ul li a:before{
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background-color: yellow;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s linear;
}
nav ul li a:hover:before{
    transform: scaleX(1);
    transform-origin: left;
}

.menu-btn{
    position: relative;
    display: flex;
    align-items: center;
    float: right;
    margin: 20px 20px 0 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: all .5s ease-in-out;
    /*border: 3px solid #fff;*/
    display: none;
}
.menu_burger{
    width: 35px;
    height: 5px;
    margin-left: 7.5px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(255,101,47,.2);
    transition: all .5s ease-in-out;
    display: none;
}

.menu_burger::before,
.menu_burger::after{
    content: '';
    position: absolute;
    width: 35px;
    height: 5px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rga(255,101,47,.2);
    transition: all .5s ease-in-out;
}

.menu_burger::before{
    transform: translateY(-12px)
}
.menu_burger::after{
    transform: translateY(12px)
}

@media (max-width: 1118px){
    nav img{
        left: 6%;
    }
}
@media (max-width: 944px){
 
    .menu-btn{
        position: relative;
        align-items: center;
        float: right;
        margin: 30px 30px 0 0;
        width: 40px;
        height: 40px;
        cursor: pointer;
        transition: all .5s ease-in-out;
        /*border: 3px solid #fff;*/
        display: flex;
    }
    .menu_burger{
        width: 32px;
        height: 4px;
        margin-left: 5px;
        background: white;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(255,101,47,.2);
        transition: all .5s ease-in-out;
        display: flex;
    }
    .menu_burger::before,
    .menu_burger::after{
        content: '';
        position: absolute;
        width: 32px;
        height: 5px;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(255,101,47,.2);
        transition: all .5s ease-in-out;
    }

    .menu_burger::before{
        transform: translateY(-10px);
        
    }
    .menu_burger::after{
        transform: translateY(10px);        
    }
    .menu-btn.open .menu_burger{
        transform: translateX(-50px);
        background: transparent;
        box-shadow: none;
    }
    .menu-btn.open .menu_burger::before{
        transform: rotate(45deg) translate(35px,-35px);
    }
    .menu-btn.open .menu_burger::after{
        transform: rotate(-45deg) translate(35px,35px);
    }
    ul {
        position: fixed;
        width: 100%;
        height: 100vh;
        background: #0C0CCF;
        top: 102px;
        left: -100%;
        text-align: center;
        transition: all .7s;
    }
    nav ul li{
        display: block;
        margin: 50px 0;
        line-height: 25px;
    }
    nav ul li a{
        font-size: 20px;
    }
}
/* --- END NAVBAR --- */
<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Tesla Engenharia &copy;</title>
        <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">-->
        <link rel="stylesheet" href="HomeStyle.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
        @import url('css-grid-master/public/base.css')
        @import url('css-grid-master/public/basic-grid.css')
        @import url('css-grid-master/public/animated-grid.css')
        @import url('css-grid-master/public/photo-grid.css')
        </style>
    </head>
    <body>
        <header>
        <nav>
            <div class="menu-btn">
                <div class="menu_burger"></div>
            </div>
            <img src="imagens/LogoTesla.png">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">History</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Localization</a></li>
            </ul>
        </nav>
        </header>
        <main>
        </main>
        <script src="Home.js"></script>
        <script src="../jquery-3.4.1.min.js"></script>
        <script src="https://kit.fontawesome.com/a076d05399.js"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

javascript html5 css3 nav-bar css-animations

1 answer

1


Two options:

Keeping the JS you need to add the CSS that changes the left of ul for 0. The only solution I see with CSS is using the selector + but then you have to change the order in the DOM and put the image before the menu-btn or after ul, which is not a problem since the image has position: absolute. As with 

nav .menu-btn.open+ul {
  left: 0;
}

This already works. Example:

const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;

menuBtn.addEventListener('click', () => {
  if (!menuOpen) {
    menuBtn.classList.add('open');
    menuOpen = true;
  } else {
    menuBtn.classList.remove('open');
    menuOpen = false;
  }

})
html {
  padding: 0;
  margin: 0
}


/* --- NAVBAR --- */

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

nav {
  height: 100px;
  background: #4747F9;
  border-bottom: 2px solid black;
}

nav img {
  height: 90px;
  width: 90px;
  position: absolute;
  top: 5px;
  left: 8%;
}

nav ul {
  float: right;
  margin-right: 25px;
}

nav .menu-btn.open+ul {
  left: 0;
}

nav ul li {
  display: inline-block;
  line-height: 100px;
  margin: 0 20px;
}

nav ul li a {
  color: white;
  position: relative;
  font-size: 18px;
  text-transform: uppercase;
  padding: 5px 0;
}

nav ul li a:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background-color: yellow;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s linear;
}

nav ul li a:hover:before {
  transform: scaleX(1);
  transform-origin: left;
}

.menu-btn {
  position: relative;
  display: flex;
  align-items: center;
  float: right;
  margin: 20px 20px 0 0;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  /*border: 3px solid #fff;*/
  display: none;
}

.menu_burger {
  width: 35px;
  height: 5px;
  margin-left: 7.5px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
  transition: all .5s ease-in-out;
  display: none;
}

.menu_burger::before,
.menu_burger::after {
  content: '';
  position: absolute;
  width: 35px;
  height: 5px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rga(255, 101, 47, .2);
  transition: all .5s ease-in-out;
}

.menu_burger::before {
  transform: translateY(-12px)
}

.menu_burger::after {
  transform: translateY(12px)
}

@media (max-width: 1118px) {
  nav img {
    left: 6%;
  }
}

@media (max-width: 944px) {
  .menu-btn {
    position: relative;
    align-items: center;
    float: right;
    margin: 30px 30px 0 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all .5s ease-in-out;
    /*border: 3px solid #fff;*/
    display: flex;
  }
  .menu_burger {
    width: 32px;
    height: 4px;
    margin-left: 5px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
    transition: all .5s ease-in-out;
    display: flex;
  }
  .menu_burger::before,
  .menu_burger::after {
    content: '';
    position: absolute;
    width: 32px;
    height: 5px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
    transition: all .5s ease-in-out;
  }
  .menu_burger::before {
    transform: translateY(-10px);
  }
  .menu_burger::after {
    transform: translateY(10px);
  }
  .menu-btn.open .menu_burger {
    transform: translateX(-50px);
    background: transparent;
    box-shadow: none;
  }
  .menu-btn.open .menu_burger::before {
    transform: rotate(45deg) translate(35px, -35px);
  }
  .menu-btn.open .menu_burger::after {
    transform: rotate(-45deg) translate(35px, 35px);
  }
  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #0C0CCF;
    top: 102px;
    left: -100%;
    text-align: center;
    transition: all .7s;
  }
  nav ul li {
    display: block;
    margin: 50px 0;
    line-height: 25px;
  }
  nav ul li a {
    font-size: 20px;
  }
}


/* --- END NAVBAR --- */
<!DOCTYPE html>
<html lang="pt-br" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Tesla Engenharia &copy;</title>
  <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">-->
  <link rel="stylesheet" href="HomeStyle.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    @import url('css-grid-master/public/base.css') @import url('css-grid-master/public/basic-grid.css') @import url('css-grid-master/public/animated-grid.css') @import url('css-grid-master/public/photo-grid.css')
  </style>
</head>

<body>
  <header>
    <nav>
      <img src="imagens/LogoTesla.png">
      <div class="menu-btn">
        <div class="menu_burger"></div>

      </div>

      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Localization</a></li>
      </ul>
    </nav>
  </header>
  <main>
  </main>
  <script src="Home.js"></script>
  <script src="../jquery-3.4.1.min.js"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

Another way would be to change the JS to apply the class directly on nav, fix the menu animation CSS to nav.open .menu-btn and add to the same CSS to fix the left. Then it would be so:

const menuBtn = document.querySelector('.menu-btn');

menuBtn.addEventListener('click', () => {
  const nav = menuBtn.closest('nav');
  nav.classList.toggle('open');
});
html {
  padding: 0;
  margin: 0
}


/* --- NAVBAR --- */

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

nav {
  height: 100px;
  background: #4747F9;
  border-bottom: 2px solid black;
}

nav img {
  height: 90px;
  width: 90px;
  position: absolute;
  top: 5px;
  left: 8%;
}

nav ul {
  float: right;
  margin-right: 25px;
}

nav.open ul {
  left: 0;
}

nav ul li {
  display: inline-block;
  line-height: 100px;
  margin: 0 20px;
}

nav ul li a {
  color: white;
  position: relative;
  font-size: 18px;
  text-transform: uppercase;
  padding: 5px 0;
}

nav ul li a:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background-color: yellow;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s linear;
}

nav ul li a:hover:before {
  transform: scaleX(1);
  transform-origin: left;
}

.menu-btn {
  position: relative;
  display: flex;
  align-items: center;
  float: right;
  margin: 20px 20px 0 0;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  /*border: 3px solid #fff;*/
  display: none;
}

.menu_burger {
  width: 35px;
  height: 5px;
  margin-left: 7.5px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
  transition: all .5s ease-in-out;
  display: none;
}

.menu_burger::before,
.menu_burger::after {
  content: '';
  position: absolute;
  width: 35px;
  height: 5px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rga(255, 101, 47, .2);
  transition: all .5s ease-in-out;
}

.menu_burger::before {
  transform: translateY(-12px)
}

.menu_burger::after {
  transform: translateY(12px)
}

@media (max-width: 1118px) {
  nav img {
    left: 6%;
  }
}

@media (max-width: 944px) {
  .menu-btn {
    position: relative;
    align-items: center;
    float: right;
    margin: 30px 30px 0 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all .5s ease-in-out;
    /*border: 3px solid #fff;*/
    display: flex;
  }
  .menu_burger {
    width: 32px;
    height: 4px;
    margin-left: 5px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
    transition: all .5s ease-in-out;
    display: flex;
  }
  .menu_burger::before,
  .menu_burger::after {
    content: '';
    position: absolute;
    width: 32px;
    height: 5px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
    transition: all .5s ease-in-out;
  }
  .menu_burger::before {
    transform: translateY(-10px);
  }
  .menu_burger::after {
    transform: translateY(10px);
  }
  nav.open .menu-btn .menu_burger {
    transform: translateX(-50px);
    background: transparent;
    box-shadow: none;
  }
  nav.open .menu-btn .menu_burger::before {
    transform: rotate(45deg) translate(35px, -35px);
  }
  nav.open .menu-btn .menu_burger::after {
    transform: rotate(-45deg) translate(35px, 35px);
  }
  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #0C0CCF;
    top: 102px;
    left: -100%;
    text-align: center;
    transition: all .7s;
  }
  nav ul li {
    display: block;
    margin: 50px 0;
    line-height: 25px;
  }
  nav ul li a {
    font-size: 20px;
  }
}


/* --- END NAVBAR --- */
<!DOCTYPE html>
<html lang="pt-br" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Tesla Engenharia &copy;</title>
  <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">-->
  <link rel="stylesheet" href="HomeStyle.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    @import url('css-grid-master/public/base.css') @import url('css-grid-master/public/basic-grid.css') @import url('css-grid-master/public/animated-grid.css') @import url('css-grid-master/public/photo-grid.css')
  </style>
</head>

<body>
  <header>
    <nav>
      <div class="menu-btn">
        <div class="menu_burger"></div>
      </div>
      <img src="imagens/LogoTesla.png">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Localization</a></li>
      </ul>
    </nav>
  </header>
  <main>
  </main>
  <script src="Home.js"></script>
  <script src="../jquery-3.4.1.min.js"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

  • Thank you very much, bro. Could you ask me another question. Where can I see more about selectors, because before seeing the + vi the ~, as well as the . open

  • There are answers here about this, search for "CSS selector". If my answer solved your problem you can mark as accepted.

  • 1

    It did. I just accepted, I’m new here still kkk vlw

Browser other questions tagged javascript html5 css3 nav-bar css-animations

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