Full-Screen Pushing Navigation

Full-Screen Pushing Navigation

A full page menu, that replaces the current content by pushing it off the screen.

Nucleo icons

Sponsored by Nucleo, a free application to collect, customize and export all your icons as icon font and SVG symbols. Made by the CodyHouse folks!

All the resources available on CodyHouse are released under the BSD-3-Clause license. You can support our project with a Paypal donation 🙌

We recently came across the beautiful Hello Monday redesign.  One thing that captured our interest was the full size navigation: it replaces the current content entirely, by pushing it out. That inspired us to create todays nugget!

Here is a quick prototype of the final effect we put together:

pushing menu prototype

Creating the structure

The HTML is structured in 3 main elements: a <main> - containing the visible content, a div.cd-nav - wrapping the navigation, and a .cd-nav-trigger action button.

The .cd-nav is composed of 2 div.cd-half-block elements, the first containing the navigation (.cd-primary-nav) and the second the contact info (.cd-contact-info).

<div id="cd-nav" class="cd-nav">
   <div class="cd-navigation-wrapper">
      <div class="cd-half-block">
         <h2>Navigation</h2>

         <nav>
            <ul class="cd-primary-nav">
               <li><a href="#0" class="selected">The team</a></li>
               <!-- list items here -->
            </ul>
         </nav>
      </div><!-- .cd-half-block -->
    
      <div class="cd-half-block">
         <address>
           <ul class="cd-contact-info">
              <li><a href="mailto:[email protected]">[email protected]</a></li>
              <!-- other contact info here -->
           </ul>
         </address>
      </div> <!-- .cd-half-block -->
   </div> <!-- .cd-navigation-wrapper -->
</div> <!-- .cd-nav -->

The .cd-nav-trigger contains a span.cd-nav-icon, which is used to create the hamburger icon (the element itself is the central line, while its ::after and ::before pseudo-elements are used to create the upper and lower lines), and a svg element, which is used to create the loading circle.

<a href="#cd-nav" class="cd-nav-trigger">Menu 
   <span class="cd-nav-icon"></span>
   <svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
      <circle fill="transparent" stroke="#66788f" stroke-width="1" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle>
   </svg>
</a>

Adding style

When user clicks the .cd-nav-trigger, the .navigation-is-open class is added to the body: this class triggers the  hamburger icon animation and the menu entrance.

As for the hamburger icon, the animation can be divided into 3 different parts:

CSS3 Transitions have been used to smooth the animation steps.

Here is a quick animation to show the whole process:

hamburger explained

.cd-nav-trigger {
  transition: transform 0.5s;
}
.navigation-is-open .cd-nav-trigger {
  /* rotate trigger when navigation becomes visible */
  transform: rotate(180deg);
}
.cd-nav-trigger .cd-nav-icon::before, 
.cd-nav-trigger .cd-nav-icon:after {
  /* upper and lower lines of the menu icon */
  width: 100%;
  height: 100%;
  transition: transform 0.5s, width 0.5s, top 0.3s;
}
.cd-nav-trigger .cd-nav-icon::before {
  transform-origin: right top;
  transform: translateY(-6px);
}
.cd-nav-trigger .cd-nav-icon::after {
  transform-origin: right bottom;
  transform: translateY(6px);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after,
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
  /* animate arrow --> from hamburger to arrow */
  width: 50%;
  transition: transform 0.5s, width 0.5s;
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
  transform: rotate(45deg);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after {
  transform: rotate(-45deg);
}
.cd-nav-trigger circle {
  /* circle border animation */
  transition: stroke-dashoffset 0.4s 0s;
}
.navigation-is-open .cd-nav-trigger circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s 0.3s;
}

For the menu entrance effect, the <main> and .cd-navigation-wrapper elements are both translated (along the X axis) by 100%. In order to create a more realistic pushing effect, we used the cubic bezier curve as transition timing function. This curve allows you to set 4 parameters (the curve control points) to create the optimal acceleration curve for the property that changes during your transition.

There are tools (like cubic-bezier.com) which allows you to customize your curve and preview the effect before using it into your code (you can also easily export the final curve parameters).

Here is a quick animation to show you the difference between a custom cubic-bezier timing functions and a linear one:

cubic-bezier curve

Events handling

We used jQuery to listen to the click event on the .cd-nav-trigger and add/remove the .navigation-is-open class consequently.

Join our newsletter

Get our monthly recap with the latest CodyHouse news