Full-Screen Pushing Navigation

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

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!

• Demo
• Download

Do you want to include this resource in a product offered for sale? Learn more about our Extended License

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.