Make An Animated Extending Menu

Make An Animated Extending Menu

Use CSS and JavaScript to create content space and reveal navigation options.

DOWNLOAD

STEP 1: Document Initiation

Start with the HTML document. This consists of the document container HTML tag, containing a head and body section. The head is used to reference the external CSS and JavaScript resources, and the body is used to contain the visible page content that will be created next.

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Extending Menu</title>

<body>

*** STEP 2 HERE

</body>

</head>

</html>

STEP 2: Navigation Content

The example content consists of a navigation container that stores a collection of links. The only exception to this is the first element of the navigation container, which will be used as the interaction icon. Take note of how the navigation container has the 'extend' class applied – this will be used to identify that this navigation is to have the effect applied.

CODE:

<a href="#">Three</a>

</nav>

STEP 3: JavaScript - Link Management

Create a file called 'code.js'. This step searches for all of the links inside the navigation(s) using the 'extend' class. Each link found has an 'animationDelay' style applied, which is calculated in relation to its index position. As a result, any CSS animation applied to these links will appear in ascending order based on the link position. Note how this code is inside a 'load' event listener applied to the window.

CODE:

window.addEventListener("load", function(){

var time = 0;

var nodes = document.querySelectorAll

("nav.extend > a");

for(var i=0; i<nodes.length; i++){

nodes[i].style.animationDelay = time+"s";

time += 0.2;

}

*** STEP 4 HERE

});

STEP 4: JavaScript - Icon Management

A second search is also required by JavaScript. This time the focus is on finding the first child element inside the identified navigation containers. This element has a click event applied to toggle the application of the 'open' class to its parent element, the navigation container. As a result, CSS can be used to define specific styling based on whether the navigation is 'open' or not.

CODE:

var nodes = document.querySelectorAll("nav.

extend > *:first-child");

for(var i=0; i<nodes.length; i++){

nodes[i].addEventListener("click",function(){

this.parentNode.classList.toggle("open");

});

}

STEP 5: CSS - Navigation Icon

Create a new file called 'styles.css'. This step sets the appearance of the first child of nav elements using 'extend'. A bigger font size, along with inline-block display, enables it to be automatically positioned alongside the navigation links, but with the ability to be treated like a block. A transition is set to the transform property to enable step 7 to trigger an animation effect.

CODE:

nav.extend > *:first-child{

display: inline-block;

cursor: pointer;

user-select: none;

-moz-user-select: none;

transition: transform .5s;

font-size: 2em;

transform: rotate(0deg);

}

STEP 6: Navigation Links

Links inside the navigation container using the extend class also need styling. To be hidden by default they use relative positioning, so that animation can move them towards their natural text flow location. Horizontal spacing between links is achieved by using padding on each side, so that they are clearly distinguishable from each other.

CODE:

nav.extend > a{

display: none;

position: relative;

opacity: 0;

padding: 0 1em 0 1em;

text-decoration: none;

color: #777;}

STEP 7: Open States

JavaScript applies and removes the open class to the navigation icon that has been clicked. This class is used to specify presentation changes when the navigation is open. Firstly, on the icon a rotate transform is applied, which will appear animated due to the transition applied in step 5. Secondly, the navigation links are changed to display as an inline-block to become visible, along with the 'open' animation to control their appearance.

CODE:

nav.extend.open > *:first-child{

transform: rotate(45deg);

}

nav.extend.open > a{

display: inline-block;

animation: open 1s forwards;}

STEP 8: Open Animation Definition

The last step is to define the opening animation required for step 7. With links set to use relative positioning, this animation starts the navigation links two characters before their natural text flow position and animates them to where they should be. Opacity starts from invisible to fully visible, making each link appear into view as they animate.

CODE:

@keyframes open {

0% {left:-2em; opacity:0;}

100% {left:0; opacity:1;}

}

DOWNLOAD

PDF | CODE