In this tutorial I explain how to design a vertical menu which use motion and change opacity effect. I wrote this post to show a better use of elastic effect which I illustrated in my latest post.
The effect I want to realize is the following. I have a vertical menu with some links. On "mouse over" the select link goes to the right with an animated elastic effect and change its opacity. When you release the element, it goes in its initial position with original opacity value. The result is something like this:
Take a look at the live preview to see this script in action.
Download source code 
Live Preview HTML code
HTML code is very simple. We have a list (<ul>) with some <li> elements with a progressive ID (l1, l2, l3, l4...):<ul id="menu">
<li id="l1"><a href="#">About</a></li>
<li id="l2"><a href="#">My Facebook Profile</a></li>
<li id="l3"><a href="#">Tutorials</a></li>
<li id="l4"><a href="#">My Book</a></li>
<li id="l5"><a href="#">Download</a></li>
<li id="l6"><a href="#">Contact</a></li>
</ul><li id="l2"><a href="#">My Facebook Profile</a></li>
<li id="l3"><a href="#">Tutorials</a></li>
<li id="l4"><a href="#">My Book</a></li>
<li id="l5"><a href="#">Download</a></li>
<li id="l6"><a href="#">Contact</a></li>
CSS code
I used this simple CSS code to set the look of links but you can customize it how your prefer:#menu li{
list-style:none;
margin:0;
padding:0;
border:0;
margin-bottom:2px;
}
#menu li a{display:block;
padding:4px;
background:#DEDEDE;
text-decoration:none;
}
list-style:none;
margin:0;
padding:0;
border:0;
margin-bottom:2px;
}
#menu li a{display:block;
padding:4px;
background:#DEDEDE;
text-decoration:none;
}
JavaScript code
In order to obtain our effects (elastic motion + change opacity) I used MooTools framework and some lines of Js code. In the <head> tag of the page add a link to MooTools:<script type="text/javascript" src="mootools.svn.js"> </script>
Now, copy and paste this code below the previous line of code in the <head> tag of the page (if you prefer you can also copy this code in a separated .js file and import it in your page):
<script type="text/javascript">
window.addEvent('domready', function(){
$('#container div').each(function(item){
var o = item.id
// FX motion with elastic effect
var fx-motion = new Fx.Style(o, 'margin-top', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
// FX opacity effect
var fx-opacity = new Fx.Style(o, 'opacity', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
})
});
</script>$('#container div').each(function(item){
var o = item.id
// FX motion with elastic effect
var fx-motion = new Fx.Style(o, 'margin-top', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
// FX opacity effect
var fx-opacity = new Fx.Style(o, 'opacity', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
item.addEvents({
'mouseenter' : function(e){
fx-motion.stop()
fx-opacity.stop()
fx-motion.start(0,100);
fx-opacity.start(0.5);
},
'mouseleave' : function(e){
fx-motion.stop()
fx-opacity.stop()
fx-motion.start(0);
fx-opacity.start(1);
}
}); 'mouseenter' : function(e){
fx-motion.stop()
fx-opacity.stop()
fx-motion.start(0,100);
fx-opacity.start(0.5);
},
'mouseleave' : function(e){
fx-motion.stop()
fx-opacity.stop()
fx-motion.start(0);
fx-opacity.start(1);
}
})
});
It's all! Download the source code and send your suggests!
Download source code Live Preview 
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Comments
Subscribe to my feeds | Subscribe comments feeds
Awesome technique! I think I would've reversed the effect when the user hovers over the menu to expand to the original blue state as opposed to shrinking and becoming lighter.
Great tut! :-)
complimenti Antonio sempre eccezionali le tue perle in codice.
Auguri
Non capisco l'utilita di questo tutorial.
L'usabilità verebbe ridotta a zero se si usasse un menù così.
C'è anche un piccolo bug: il cursore deve essere posizionato alla destra della scritta linkabile, per far in modo che lo script funzioni perfettamente.
------------
I don't understand the utility of this tutorial.
The usability will be reduced to zero if you use the menu in this way.
There is also a small bug: the cursor must be positioned to the right of the 'linkable' writing, so that the script perfectly works.
@Andrea: Why? Your bug... isn't a bug! It's work in this way :)
Ciao Antonio,
concordo con Andrea, dalla Preview si nota quasto difetto, che a mio avviso non é poco, se consideriamo che, chi clicca, lo fà sulla scritta.
Qmq buon anno a tutti i lettori di Woork.
wow..its cool!
There is a problem when you hover on the left side or near the word. It moves to right a bit and stops. Solution could be wrap it by div? But it will add unnecessary tag. Or make it as block? I don't know.
As said in a previsious comments this is a pretty effect but I think in practice it isn't really usable...IMHO the concept is wrong: when you mouse pointer is over...the link run away: this confuse the real user.
I agree with Luca Bernardi. When hovering over a link (where the text is, which almost everybody is used to do) it slides away. Next problem is that the links starts bouncing (your pointer is going out because the links shrinks to the right) and which makes it difficult to 'catch' the link.
Good idea, Bad Execution.
Bug: When rollover the text, the block moves and rollover is lost.
A nice idea for a navigation.
Fun toy for developers, useless for real users.