I started reading some tutorials and books about this very nice and simple javascript framework, with which you can do supercool things in the browser.
It’s actually pretty simple to use for simple effects and gets complex as you try to do magic with it.
After reading a chapter about it’s Tween function, I decided to make a simple menu with a simple fade animation. It’s really something for beginners, since this is what I am, a beginner.
We are going to do a menu with some links that change their position and color with a simple animation when we hover them. Easy peasy. Check the result here.
First: we start the document as always, with a doctype (I still use the transitional xhtml) and include the framework.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sl" lang="sl">
<head>
<title>MooTools</title>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1250" />
<script src="inc/mootools-1.2.1-core.js"></script>
Second: we add an event to our window element which is going to start as soon as the DOM (Document Object Model – the browser) is ready (it won’t wait all the other elements to load [big, fat images, advertisments etc]).
<script type="text/javascript" language="javascript">
window.addEvent('domready', function() {
});
</script>
Third: when the DOM will be ready we want it to get all the links with a specified class (I made it this way, you could easily make all the links in a specified UL or any other element behave the same way) and apply a special behaviour to them.
$$('a.click').addEvents({
'mouseover': function() {
this.morph({
'padding-left': '20',
'color': ['#1E0CB5', '#94BB06']
})
},
'mouseout': function() {
this.morph({
'padding-left': '10',
'color': ['#94BB06', '#1E0CB5']
})
}
});
As you can see, MooTools is very simple and easily understandable. Using $$(‘a.click’) we create an array of all the links in our page with the class=”click” attribute.
Next, we tell the function to Morph the link when the mouse hovers the link and when the mouse leaves the link. We add 10px of padding on the left and change the color to green when the mouse passes over the link and restore the default values when it leaves. Easy.
Still in the head we apply some styles to our menu.
<style>
a { color: #1E0CB5; }
#menu { list-style: none; margin: 0; padding: 0; }
#menu li { width: 150px; background: #eee; }
#menu li a { padding: 4px 10px; display: block; }
</style>
And now we complete our simple page.
</head>
<body>
<h3>Something nice</h3>
<ul id="menu">
<li><a class="click" href="#">link</a></li>
<li><a class="click" href="#">link</a></li>
<li><a class="click" href="#">link</a></li>
<li><a class="click" href="#">link</a></li>
</ul>
</body>
</html>
That’s it, a nice animated menu to use on your website! If you want to see the whole code in one piece, check the source of the live example.
Hope I was clear enough.
I’ll write again with a new example of what I’ve learnt!
