Menu a comparsa laterale con effetti easing - jQuery

Anche oggi alle prese con un’animazione realizzata in jQuery: un’animazione che gestisce la comparsa laterale, in tempi diversi, delle varie voci di un menu per ottenere un risutato del genere:

DEMO

 I codici HTML  e CSS non contengono nulla di particolare, definiscono semplicemente l’organizzazione nella pagina del menu.

 HTML

 
<ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">item 4</a></li>
</ul>
 

 CSS

 
html,body
{
            background-color: #4b4b4b;
            text-align:center;
}
ul
{
            width:500px;
            margin-top:50px;
            margin-left:auto;
            margin-right:auto;
            list-style: none;
            padding:0;
            margin-bottom: 100px;
}
li
{
            width:100%;
            height:50px;
            margin-left: -500px; /* deve corrispondere alla larghezza del contenitore */
            font-family: Verdana;
            font-size: 30px;
            margin-top: 20px;
            background-color: #ffd500;
            padding-top:10px;
}
a
{
            text-decoration: none;
            color:#4b4b4b;
            margin-left:30px;
}
a:hover
{
            color:black;
}
 

Il codice in jQuery, invece, ha il compito di animare ogni singola voce del menu modificandone il valore di margin-left e attribuendone una velocità tale da garantire l’effetto “scaletta”.

Nel foglio di stile, il css, definivo il margin-left in modo tale da far uscire completamente le voci dal contenitore, quindi qui lo riporto a 0px animandolo così da ottenere l’effetto desiderato.

 jQUERY

 
$(document).ready(function()
{
        var easing="";
        var vel = 1200;
        var diff = vel/ $('li').length;
        $('li').each(function()
        {
              $(this).animate({'marginLeft':'0px'},vel,easing);
              vel-=diff;
         });
});
 

 In più…

 Come potete vedere nella demo è possibile personalizzare ulteriormente l’animazione aggiungendo allo script uno dei tanti effetti di easing che jQuery mette a disposizione e che potete provare in azione sempre alla stessa pagina.