<param>bd=tblmenu|order=orden|query=nivel=1|indice=idx|depend=depend</param>

<precode>

<ul id="sdt_menu" class="sdt_menu">

</precode>

<code>

<li>

   <a href="?-#params#-">

       <img src="-#estilo#-" target="-#destino#-" alt=""/>

       <span class="sdt_active"></span>

       <span class="sdt_wrap">

           <span class="sdt_link">-#strmenu#-</span>

           <span class="sdt_descr">-#strmenudecode#-</span>

       </span>

   </a>

 <!--//db=tblmenu|index=idx|related=depend|order=orden|query=nivel=2 //-->

         <div class="sdt_box">

                 <subcode>

                 <a href="?-#params#-">-#strmenu#-</a>

                 </subcode>

         </div>

 <!--//end//-->

</li>

</code>

<postcode>

</ul>

<script type="text/javascript">

 $(function() {

         $('#sdt_menu > li').bind('mouseenter',function(){

                 var $elem = $(this);

                 $elem.find('img')

                          .stop(true)

                          .animate({

                                 'width':'160px',

                                 'height':'160px',

                                 'left':'0px'

                          },400,'easeOutBack')

                          .andSelf()

                          .find('.sdt_wrap')

                          .stop(true)

                          .animate({'top':'140px'},500,'easeOutBack')

                          .andSelf()

                          .find('.sdt_active')

                          .stop(true)

                          .animate({'height':'170px'},300,function(){

                         var $sub_menu = $elem.find('.sdt_box');

                         if($sub_menu.length){

                                 var left = '160px';

                                 if($elem.parent().children().length == $elem.index()+1)

                                         left = '-160px';

                                 $sub_menu.show().animate({'left':left},200);

                         }        

                 });

         }).bind('mouseleave',function(){

                 var $elem = $(this);

                 var $sub_menu = $elem.find('.sdt_box');

                 if($sub_menu.length)

                         $sub_menu.hide().css('left','0px');

                 

                 $elem.find('.sdt_active')

                          .stop(true)

                          .animate({'height':'0px'},300)

                          .andSelf().find('img')

                          .stop(true)

                          .animate({

                                 'width':'0px',

                                 'height':'0px',

                                 'left':'85px'},400)

                          .andSelf()

                          .find('.sdt_wrap')

                          .stop(true)

                          .animate({'top':'15px'},500);

         });

 });

</script>

</postcode>