Animated mobile animation with vanilia js and css

Question

I would like to make animated show and hide navigation menu like in this webiste

I tried to do it with JS

const body = document.getElementsByTagName("body")[0];
let element = document.querySelector(".navigation");
let button = document.querySelector(".menu-button");

 button.addEventListener("click", function() {
  button.classList.toggle("menu-button--changed");
  element.classList.toggle("navigation--show");
});

And width scss

.navigation {
  background-color: rgb(14, 14, 23);
  width: 250px;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 3;
  padding: 6rem 0 2rem 0rem;
  transition: transform 0.3s ease-out;
  transform: translateX(30rem);
  &--show {
    transform: translateX(0rem);
  }

 &__item {
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.03);

    &:last-child {
      border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }
  }
  &__link {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 11px 5px 10px 20px;
    font-size: 1.4rem;

    &:hover {
      text-transform: uppercase;
    }
  }
}

HTML

<!-- Mobile menu button -->
  <div class="menu-button">
    <div class="menu-button--bar"></div>
  </div>

  <!-- Navigation -->
  <div class="navigation">
    <nav class="menu__nav">
      <ul class="navigation__list">
        <li class="navigation__item"><a class="navigation__link" href="#">Home</a></li>
        <li class="navigation__item"><a class="navigation__link" href="#">Contact</a></li>
        <li class="navigation__item"><a class="navigation__link" href="#">Group</a></li>
      </ul>
    </nav>
  </div>

  <div class="content-wrapper">
    <!-- Header -->
    <div class="main-header">
      <img src="img/logo-retina-1.png" class="main-header__logo">
      <div class="main-header__bg"></div>
      <div class="main-header__bg--decoder"></div>
    </div>

But it doesn't work correctly. I don't know how to move body to left, when I show menu, and change it to more darkly. I tried to add, but animation doesn't work.

Answer 1

This is a very basic one I made for another question a while ago, it's similar to what you're asking. Basically, the navigation bar changes colour when the user reaches a certain scroll point. Should hopefully be a starting point to actually getting you on your way with making it disappear and then reappear.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- navigation -->
<nav class="navbar navbar-fixed-top" id="nav">
    <div class="container">
        <div class="navbar-header">
            <!-- Mobile Hamburger -->
            <button type="button" class="navbar-toggle" id="nav-icon" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand logo" href=""><img id="logo" src="assets/img/logo.png" alt="Flock+ Logo"></a>
        </div>
        <div class="navbar-collapse collapse">
            <!-- Navigation Links -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="">HOME</a></li>
                <li><a href="">COURSES</a></li>
                <li><a href="">PRICING</a></li>
                <li><a href="">ACCOUNT</a></li>
                <li><a href="">CONTACT</a></li>
            </ul>
        </div>
    </div>
</nav>

<div style="height:1000px"></div>

CSS

.navbar { 
  background-color:#101010; 
  border:none; 
  height: 200vh;
}
#logo { 
  width:45px; 
  height:auto; 
 }
.navbar-right li a { 
  color:#e5e5e5;  
  font-size:14px; 
}
ul.navbar-right li a:hover { 
  color:#e5e5e5; 
  text-decoration: none; 
  background-color:transparent; 
}
ul.navbar-right li a:visited { 
  color:#e5e5e5; 
  text-decoration:none; 
}
/* Transitions */
.navbar { background-color: transparent; border:none; transition:0.8s; }
.nav-scrolled { background-color:#181818; transition:0.8s; }
.navbar-right li a { letter-spacing:3px; }

JS

// Change nav on scroll
$(function() {
    var header = $(".navbar");

    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        if (scroll >= 200) {
            header.addClass("nav-scrolled");
        } else {
            header.removeClass("nav-scrolled");
        }
    })
});

ALT: https://jsfiddle.net/vtqeuzf5/

Answer 2

Treat the main page as a element and use overflow hidden.

lets say that main column is 100% on mobile when you click the menu button it changes to 60% and the menu to 40%.

Bootstrap has a basic turotial about this