Example of creating an animated menu

In my work I often face the same type of tasks. In order not to stagnate, to grow as a developer, and just not get bored from the same type of work, I think of small chips in projects.
So, when creating the admin for one of my clients, I decided to make a animated menu with the aid of Mootools framework. In this article I will tell how to create the menu a bit and describe functions and methods of the framework, which has helped me in this. The article is written for people who are just starting learning mootools, and for those who want to start learning this framework, but may not know where to start.



It should be noted immediately that the conversation about the benefits of the framework and its shortcomings will remain outside of this article.

So, first we need to create a static menu. Here is my code:

html

<div class="bord"></div>
<div class="head">
<a class="headParagraph">Settings</a>
<a class="headParagraph">Topics</a>
<a class="headParagraph">Articles</a>
<a class="headParagraph">Gallery</a>
<a class="headParagraph"></a>
<a class="headParagraphExit" href="#">Outlet</a>
</div>

CSS

.head{
margin: 0 auto;
padding: 15px 20px 3px 20px;
width: 90%;
height: 17px;
}

.bord{
border-top: 2px solid #000;
top: 35px;
left: 3%;
width: 94%;
position: absolute;
}

.headParagraph{
float: left;
margin-right: 40px;
cursor: pointer;
font-size: 16px;
color: #444;
margin-top: 0;
}

.headParagraphExit{
float: right;
cursor: pointer;
text-decoration: none;
color: #000;
font-sizq: 20px;
}

To create the effect of “falling” links to use the Fx class.Morph, which allows you to change the properties of an element within the CSS.

The class is declared thus:

var myEffect = new Fx.Morph('myElement', {duration: 'long', transition: Fx.Transitions.Sine.easeOut});

The duration property can accept values of the long or short this affects the speed of execution of effect(transition from one property value of the element to another). Transition defines the animation effect, more from the list of accepted values for this property can be found in the official documentation.

To start the effect, we need to declare what properties and how they will change in our facilities. For this there is a start method, which starts the effect:

myEffect.start({
'height': [10, 100],
'width': [900, 300]
});

In this example our element will change the value of width and height — the height will increase from 10px to 100px and the width reduced from 900px to 300px.
Perhaps some other ad ideas of this method, for example:

myEffect.start({
'height': 100,
'width': 300
});

or

myEffect.start('.myClassName');

In the first example, our element will change its properties with the current values to those that we specify in the method and in the second case current at the moment the properties will change to the one described for the class myClassName.

So, in order for our links to “fall“ and returned to its original position, create a class that will change the properties margin-top and color of our links, and call it selected.

.selected{
margin-top: 25px;
color: #000;
}

Now in order for our link to “fall”, it is necessary to apply to the selected class, and to return back to initial position class headParagraph.

To access our menu items, you can use one of two methods provided for in mootools is either the appeal on the element's id, or appeal to an array of elements by class name to which the member belongs, or by the name of the tag address in the group of homogeneous elements.
In the first case, an appeal to the element looks like $(‘id_element’). In the second case, $$(‘#tag_name.class’), $$(‘#tag_name’), $$(‘.class’) returns an array of elements corresponding to one of the conditions.

In our case we will use the second option of treatment to get an array of elements.

$$('.headParagraph').each(function(element, index){

var myEffect = new Fx.Morph(element, {
duration: 'short', 
transition: Fx.Transitions.Elastic.easeInOut
});
myEffect.start('.selected');
$$('.headParagraph').each(function(otherElement, otherIndex){
if(element!=otherElement){
var myOtherEffect = new Fx.Morph(otherElement, {
duration: 'short', 
transition: Fx.Transitions.Back.easeOut
});
myOtherEffect.start('.headParagraph');
}
});
});
});

It should be noted that the construction $$('.headParagraph').each(function(element, index){...}); iterates through each elements of the array $$('.headParagraph'), assigning to a variable element a value of the current array item and the index variable is the key of this element.
Let us examine a little more code that I quoted above. Each element in a loop to the onClick event we bind the animation:

element.addEvent('click',function(){
var myEffect = new Fx.Morph(element, {
duration: 'short', 
transition: Fx.Transitions.Elastic.easeInOut
});
myEffect.start('.selected');
...
});

And design

$$('.headParagraph').each(function(otherElement, otherIndex){
if(element!=otherElement){
var myOtherEffect = new Fx.Morph(otherElement, {
duration: 'short', 
transition: Fx.Transitions.Back.easeOut
});
myOtherEffect.start('.headParagraph');
}
});

is to ensure that when you click on one of the sections of our menu, the section that is currently active is returned to the initial position.

The end result can be seen on this the link.

If you have any questions, happy to answer them in the comments or on chapapote. Well, if readers are interested in this subject, the continuation will not keep itself waiting long.

Article based on information from habrahabr.ru