Press "Enter" to skip to content

Mobile-first Morphing Navigation Menu Animation with JavaScript

Mobile Menu Animation is the first mobile full-screen hamburger navigation system that uses CSS3 transitions to achieve switching effects on opening and closing.

mobile app navigation examples, mobile navigation menu, mobile first responsive menu, mobile first hamburger menu, mobile navigation patterns, mobile app navigation design

How to make use of it:

1. Create a navigation menu and hamburger menu to switch as follows:

<div class="menu">
  <nav class="menu__nav">
    <ul class="menu__list r-list">
      <li class="menu__group">
        <a href="#0" class="menu__link r-link">Home</a>
      </li>
      <li class="menu__group">
        <a href="#0" class="menu__link r-link">About me</a>
      </li>
      <li class="menu__group">
        <a href="#0" class="menu__link r-link">Services</a>
      </li>
      <li class="menu__group">
        <a href="#0" class="menu__link r-link">Portfolio</a>
      </li>
      <li class="menu__group">
        <a href="#0" class="menu__link r-link">Blog</a>
      </li>
      <li class="menu__group">
        <a href="#0" class="menu__link r-link">Contacts</a>
      </li>
    </ul>
  </nav>
  <button class="menu__toggle r-button" type="button">
    <span class="menu__hamburger m-hamburger">
      <span class="m-hamburger__label">
        <span class="menu__toggle-hint screen-reader">Open menu</span>
      </span>
    </span>
  </button>
</div>

2. Basic CSS Styles for Menu.

.header{
  box-sizing: border-box;
  width: 100%;
  color: var(--colorWhite);
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9998;
}
.menu{
  box-sizing: border-box;
  width: 100%;
  padding-bottom: 55px;
  height: 0;
  transform: translate3d(0, -100%, 0);
  opacity: 0;
  display: flex;
  align-items: flex-end;
  position: fixed;
  top: 0;
  left: 0;
}
.menu__list{
  box-sizing: border-box;
  width: 100%;
  max-height: 100%;
  display: none;
  padding-top: 30px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.menu__group{
  padding: .5rem 3rem; 
  font-size: 3.2rem;
  font-weight: 700;
  text-transform: uppercase;
}
.menu__group_active{
  background-color: var(--colorWhite);
  color: var(--colorBlack);
}
.menu__item{
  padding: 8px 25px;
  display: block;
}

3. Hamburger menu toggle button style.

.hamburger{
  position: relative;
  line-height: 1;
  padding-bottom: .5em;
}
.hamburger:before{
  content :"";
  width: 100px;
  height: 100px;
  background-color: var(--colorMain);
  border-radius: 50%;
  position: absolute;
  bottom: -55px;
  left: -35px;
}
.hamburger__button{
  width: 1.4em;
  height: 1em;
  font-size: 20px;
  position: relative;
  text-indent: -9999px;
  z-index: 2;
}
.hamburger__button:before, .hamburger__button:after, .hamburger__label{
  width: 100%;
  height: 20%;
  border-radius: 5px;
  background-color: currentColor;
  position: absolute;
  left: 0;
}
.hamburger__button:before, .hamburger__button:after{
  content:"";
}
.hamburger__button:before{
  top: 0;
}
.hamburger__button:after{
  bottom: 0;
}
.hamburger__button:focus{
  outline: none;
}
.hamburger__label{
  margin-top: -.1em;
  top: 50%;
}

4. CSS styles are required for the menu on activation.

.js-menu_activated{
  overflow: hidden;
}
.js-menu_activated .menu{
  height: 100%;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.js-menu_activated .hamburger:before{
  width: 100vh;
  height: 100vh;
  transform: translate3d(-50vh, -50vh, 0) scale(5);
}
.js-menu_activated .menu__list{
  display: block;
}
.js-menu_activated .hamburger__button:before{
  transform: translate3d(0, -50%, 0) rotate(45deg);
  top: 50%;
}
.js-menu_activated .hamburger__button:after{
  transform: translate3d(0, -50%, 0) rotate(135deg);
  top: 50%;
}
.js-menu_activated .hamburger__label{
  transform: rotate(-45deg) translate3d(-5.71429px,-6px,0);
  opacity: 0;
}

5. CSS for Transform Effects.

.menu{
  transition: opacity .2s ease-out;
}
.js-menu_activated .menu{
  will-change: opacity;
  transition-duration: .2s;
  transition-delay: .3s;
}
.hamburger:before{
  will-change: width, height;
  transition: transform .3s cubic-bezier(0.04, -0.1, 0.29, 0.98),
    width .3s cubic-bezier(0.04, -0.1, 0.29, 0.98),
    height .3s cubic-bezier(0.04, -0.1, 0.29, 0.98);
}
.js-menu_activated .hamburger:before{
  transition-duration: 1s;
}
.hamburger__button:before, .hamburger__button:after{
  transition-property: transform;
}
.hamburger__button:before, .hamburger__button:after, .hamburger__label{
  transition-timing-function: ease;
  transition-duration: .15s;
}
.hamburger__label{
  transition-property: transform, opacity;
}

6. JavaScript master to toggle CSS classes when toggling the menu.

(function(){
  'use strict';
  class Menu {
    constructor(settings) {
      this.nodeMenu = settings.nodeMenu;
      settings.nodeMenuButton.addEventListener('click', this.toggle.bind(this));
    }
    toggle() {
      return this.nodeMenu.classList.toggle('js-menu_activated');
    }
  }
  let nodeMenu = document.querySelector('body');
  
  new Menu({
    nodeMenu: nodeMenu,
    nodeMenuButton: nodeMenu.querySelector('.js-menu__toggle')
  });
})();

mobile-first morphing navigation menu, mobile menu animation Plugin/Codepen, responsive menu for mobile and desktop


See Demo And Download

Official Website(melnik909): Click Here

This superior jQuery/javascript plugin is developed by melnik909. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.