An example of creating an animated menu

In my work I often encounter tasks of the same type. In order not to stagnate in one place, to develop as a developer, and just not to be bored of the same type of work, I invent small chips in projects.
So, when creating an admin for one of my clients, I decided to make an animated menu using the Mootools framework. In this article I will tell you how the menu was created and I will describe a little the functions and methods of the framework that helped me with this. The article is written both for people who are just starting to learn mootools, and for those who wish to start learning this framework, but may not know where to start.



It should be immediately noted that talking about the advantages of this framework, as well as its disadvantages, will remain outside the scope of this article.
')
And so, first we need to create a static menu. Here is my version of the code:

 html

 <div class = "bord"> </ div>
 <div class = "head">
     <a class="headParagraph"> Settings </a>
     <a class="headParagraph"> Sections </a>
     <a class="headParagraph"> Articles </a>
     <a class="headParagraph"> Galleries </a>
     <a class="headParagraph"> Languages ​​</a>
     <a class="headParagraphExit" href="#"> Logout </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 a “falling” link, the class Fx.Morph is used, which allows you to change the properties of an element within CSS.

A class is declared like this:

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

The duration property can take values ​​of long or short - this affects the speed of the effect (transition from one value of an element property to another). Transition determines the type of animation effect, more information with a list of accepted values ​​of this property can be found in the official documentation .

To start the effect, we need to announce what properties and how will change in our objects. To do this, there is a start method that starts the effect:

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

In this example, our element will change the width and height - the height will increase from 10px to 100px, and the width will decrease, respectively, from 900px to 300px.
There are also several other variants of declarations 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 from the current values ​​to those that we specify in the method, and in the second case, the currently relevant properties will change to those described in the class myClassName.

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

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

Now, in order for our link to “fall”, you need to apply the selected class to it, and to return to its original position, the headParagraph class.

To access our menu items, you can use one of the two methods provided in mootools - this is either a call on the id of the element, or a call to the array of elements by the name of the class to which the element belongs, or by the tag name we refer to the group of similar elements.
In the first case, the call 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 version of the call in order to get an array of elements.

  $$ ('. headParagraph'). each (function (element, index) {
	 element.addEvent ('click', function () {
		 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 $$ ('. HeadParagraph'). Each (function (element, index) {...}); enumerates in turn all elements of the $$ ('. headParagraph') array, assigning the element variable the value of the current element of the array, and the index variable the key of this element.
Let us examine in more detail the code that I cited above. For each element in the loop, we attach an animation to the onClick event:

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

And the 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');
     }
 }); 

serves to ensure that when you click on one of the sections of our menu, the section that is currently active will return to its original position.

The end result can be seen at this link .

If you have any questions, I am happy to answer them in the comments or on habraposhta. Well, if readers are interested in this topic, then the continuation will not take long to wait.