Menu sympathique Jquery

Exemple d'utilisation Jquery

Vous aller vous en rendre compte très vite mais c'est plutot tres simple... Il suffit d'un css basique un UL,LI et deux fonction Jquery

• animate( params, [duration], [easing], [callback] )
• siblings( [expr] )

Commençons par le css...

    .clear { clear: both }
    #menu_holder ul{ list-style-type: none;}
    #menu_holder ul li { float:left;width:100px;}
    #menu_holder ul li a {display:block; width:100%; padding:10px; text-decoration:none;color:white;}
    #menu_holder ul { margin:0px; padding:0px; }
    #menu_holder ul li { color:white; font-size:20px; font-weight:bold; border:1px solid #000;}
    #first_li{ background:url(./images_articles/img_1.jpg); height:300px}
    #second_li{ background:url(./images_articles/img_2.jpg); height:300px}
    #third_li{  background:url(./images_articles/img_3.jpg); height:300px}

Puis le Javascript utiliant les fonctions de Jquery

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type="text/javascript">
	$(document).ready(function(){

        //declaration des variables
        var speed = 200; //vitesse
        var min_width = 100; //largeur minimum
        var max_width = 350; //largeur maximum

        //aanimation jusqu'a la largeur maximale
        $('.selected').animate( { width : max_width } );

        /* utilisation des fonctions Jquery '*/
        $('#menu_holder ul li').hover(function(){
            $(this).animate({ width : max_width }, { queue:false , duration:speed});
            $(this).siblings().animate({ width : min_width }, { queue:false , duration:speed});

        });
    });
</script>

Le HTML...

       <div id="menu_holder">
            <ul>
                <li id="first_li"></li>
                <li id="second_li"></li>
                <li id="third_li"   class="selected"></li>
            </ul>
         <div class="clear">
        </div>

Et voici le résultat...

Commentaires