Full-Screen Pushing Navigation

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

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:

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:

• the transformation of the hamburger icon into an arrow: the .cd-nav-icon::after and .cd-nav-icon::before pseudo-elements are both rotated of 45/-45deg (using as transform-origin the right edge of the element) and their width is reduced to 50%;
• the rotation of the entire .cd-nav-icon (180deg);
• the circle loading effect: the stroke-dashoffset value of the circle element is set to zero (initially, it has a stroke-dasharray="157 157" and a stroke-dashoffset="157", where 157 is the circumference value).

CSS3 Transitions have been used to smooth the animation steps.

Here is a quick animation to show the whole process:

.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:

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.