Javascript: animation déploiement menu...

Fetide68 Messages postés 816 Statut Membre -  
 Utilisateur anonyme -
Bonjour,

J'essaie d'animer un menu en javascript, mais c'est pas encore au point...

Comment je pourrais améliorer ce script qui fonctionne à priori sur IE et FF ?

Je ne suis pas contre une proposition de code, mais je souhaiterais avant tout comprendre ce que vous me proposer (sans profiter d'une réponse toute faite: pas un feignant moi... hehe). Merci pour votre comprésenhion.

<html>   
 <head>   
  <style type="text/css">   
   ul.menu { background: red; width: 300px; margin: 0px; padding: 0px; list-style: none; }   
   ul.sousmenu { background: yellow; overflow: hidden; }   
   a { color: #fff; }   
  </style>   
  <script language="JavaScript">   
   var menus=new Array("m1","m2");   
   function show(id) {   
    size=0;   
    menu=document.getElementById('id');   
    for (i=0;i<menus.length;i++) {   
     if (menus[i]!=id) document.getElementById(menus[i]).style.display="none";   
     else document.getElementById(menus[i]).style.display="block";   
    }   
    setInterval("agrandir('"+id+"')",10);   
   }   
      
   function agrandir(id) {   
    var menu=document.getElementById(id);   
    if (size<=80) {   
     document.getElementById(id).style.height=size+"px";   
     size++;   
    }   
   }   
  </script>   
 </head>   
 <body>   
  <ul class="menu">   
   <li><a href="#" onmouseover="show('m1');">Test 1</a></li>   
   <ul class="sousmenu" id="m1" style="display: none; height: 0px;">   
    <li>Test 1</li>   
    <li>Test 1</li>   
    <li>Test 1</li>   
    <li>Test 1</li>   
   </ul>   
   <li><a href="#" onmouseover="show('m2');">Test 2</a></li>   
   <ul class="sousmenu" id="m2" style="display: none;">   
    <li>Test 2</li>   
    <li>Test 2</li>   
    <li>Test 2</li>   
    <li>Test 2</li>   
   </ul>   
  </ul>   
 </body>   
</html>   


Merci beaucoup pour votre aide.

1 réponse

Utilisateur anonyme
 
regarde ceci : www.milonic.com
sinon tappes sur google : drop menu
0