Side Menu Animation

In this example below you will see how to do a Side Menu Animation with some HTML / CSS and Javascript

Playing around with menu reveal animations.

Thumbnail
This awesome code was written by kjbrum, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kjbrum ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Side Menu Animation</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="nav">
    <a href="#" class="nav__trigger">
        <div class="bars"></div>
    </a>
    
    <div class="nav__content">
        <nav class="nav__list">
            <ul>
                <li class="nav__item"><a href="#">Home</a></li>
                <li class="nav__item"><a href="#">About</a></li>
                <li class="nav__item"><a href="#">Team</a></li>
                <li class="nav__item"><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>    
</div>

<div class="content">
    <h1>Side Menu Animation</h1>
    <h4>By: <a href="http://kylebrumm.com" target="_blank">Kyle Brumm</a></h4>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/kjbrum/side-menu-animation-KmvReR */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300,700);
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  font-family: "Raleway", "Open Sans", sans-serif;
  background-color: #ebf4ee;
  min-height: 100%;
}

h1, h2, h3,
h4, h5, h6 {
  font-family: "Raleway", "Open Sans", sans-serif;
  margin: 0;
}

a {
  color: #222222;
  text-decoration: none;
}

.content {
  position: absolute;
  top: 50%;
  left: 2rem;
  width: 70%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.content h1,
.content h4 {
  color: #1f2822;
}
.content h1 {
  font-size: 6vmin;
}
.content h4 {
  font-size: 3vmin;
}
.content a {
  color: #1f2822;
}

.nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3.75rem;
  background-color: #1f2822;
  transition: 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  will-change: width;
  z-index: 99;
}
.nav.is-active {
  width: 100%;
}

.nav__trigger {
  display: block;
  position: absolute;
  top: 50%;
  right: 1rem;
  margin-top: -10px;
  padding: 8px 0;
  transition: 0.2s ease-in-out;
  z-index: 10;
}
.nav__trigger .bars {
  position: relative;
}
.nav__trigger .bars, .nav__trigger .bars:before, .nav__trigger .bars:after {
  width: 28px;
  height: 4px;
  background-color: #9ac6ac;
  border-radius: 4px;
  transition: 0.2s ease-in-out;
}
.nav__trigger .bars:before, .nav__trigger .bars:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}
.nav__trigger .bars:before {
  -webkit-transform: translateY(-8px);
          transform: translateY(-8px);
}
.nav__trigger .bars:after {
  -webkit-transform: translateY(8px);
          transform: translateY(8px);
}
.nav__trigger.is-active {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.nav__trigger.is-active .bars:before, .nav__trigger.is-active .bars:after {
  -webkit-transform: translateX(0) rotate(-90deg);
          transform: translateX(0) rotate(-90deg);
}

.nav__content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 1200px;
  padding: 1rem 3.75rem 1rem 2.75rem;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  transition: 0s linear 0.25s;
}
.nav__content.is-active {
  visibility: visible;
  opacity: 1;
  transition: 0s linear;
}
.nav__content.is-active .nav__item a {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  transition-property: opacity, color, -webkit-transform;
  transition-property: transform, opacity, color;
  transition-property: transform, opacity, color, -webkit-transform;
  transition-duration: 0.55s, 0.55s, 0.3s;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1), ease-in-out, ease-in-out;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(1) a {
  transition-delay: 0s, 0s, 0s;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(2) a {
  transition-delay: 0.05s, 0.05s, 0s;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(3) a {
  transition-delay: 0.1s, 0.1s, 0s;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(4) a {
  transition-delay: 0.15s, 0.15s, 0s;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(5) a {
  transition-delay: 0.2s, 0.2s, 0s;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(6) a {
  transition-delay: 0.25s, 0.25s, 0s;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(7) a {
  transition-delay: 0.3s, 0.3s, 0s;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(8) a {
  transition-delay: 0.35s, 0.35s, 0s;
}
.nav__content.is-active .nav__list .nav__item:nth-of-type(9) a {
  transition-delay: 0.4s, 0.4s, 0s;
}

.nav__list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item {
  overflow: hidden;
}
.nav__item a {
  display: inline-block;
  padding: 1rem;
  color: #9ac6ac;
  text-decoration: none;
  font-size: 3rem;
  font-size: 10vw;
  font-size: 14vmin;
  font-weight: 300;
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  transition: 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  will-change: transform, opacity;
}
.nav__item a:hover {
  color: white;
}

.nav__divider {
  margin: 1.75rem 0 1.5rem;
  width: 100%;
  height: 2px;
  background-color: #9ac6ac;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}


/*Downloaded from https://www.codeseek.co/kjbrum/side-menu-animation-KmvReR */
var navigation = {
    // Variables
    $nav: document.querySelector('.nav'),
    $navTrigger: document.querySelector('.nav__trigger'),
    $navContent: document.querySelector('.nav__content'),
    $navList: document.querySelector('.nav__list'),
    transitionEnd: 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',

    init: function init() {
        var self = this;

        // Handle the transitions
        self.$navTrigger.addEventListener('click', function () {
            if (!self.$navTrigger.classList.contains('is-active')) {
                // .nav--trigger active
                self.$navTrigger.classList.add('is-active');

                // .nav active
                if (!self.$nav.classList.contains('is-active')) {
                    self.$nav.classList.add('is-active');
                    self.$nav.addEventListener('transitionend', function (e) {
                        if (e.propertyName == 'width' && self.$navTrigger.classList.contains('is-active')) {
                            // .nav__content active
                            self.$navContent.classList.add('is-active');
                        }
                    });
                } else {
                    self.$navContent.classList.add('is-active');
                }

                // no-csstransitions fallback
                if (document.documentElement.classList.contains('no-csstransitions')) {
                    self.$navContent.classList.add('is-active');
                }
            } else {
                // .nav--trigger inactive
                self.$navTrigger.classList.remove('is-active');

                // .nav__content inactive
                if (self.$navContent.classList.contains('is-active')) {
                    self.$navContent.classList.remove('is-active');
                    self.$navContent.addEventListener('transitionend', function (e) {
                        if (e.propertyName == 'opacity' && !self.$navTrigger.classList.contains('is-active')) {
                            // .nav inactive
                            self.$nav.classList.remove('is-active');
                        }
                    });
                } else {
                    self.$nav.classList.remove('is-active');
                }

                // no-csstransitions fallback
                if (document.documentElement.classList.contains('no-csstransitions')) {
                    self.$nav.classList.remove('is-active');
                }
            }
        });
    }
};

navigation.init();

Comments