Menu de navigation dynamique à plusieurs niveaux avec niveau suivant

Auteur：Eve Cole Date de mise à jour：2009-06-20 15:46:17

Après avoir exécuté et vu l'effet, vous pouvez cliquer sur la flèche vers le bas pour agrandir le tableau et cliquer sur le bouton vers le haut pour réduire le tableau ! J'espère que cela vous sera utile !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.downcodes.com< /title> <script language="javascript"> function tablecollapse() { /* Variables */ var cliffClass='footcollapse'; var cliffPic=''; var expandPic=''; tables var t=document.getElementsByTagName('table'); var checktest= new RegExp("(^|\s)" +effondrementClass + "(\s|$)"); <t.length;i++) { // si la table n'a pas la bonne classe, ignorez-la if(!checktest.test(t[i].className)){continue;} // rend le pied de page cliquable t[i] .getElementsByTagName('tfoot')[0].onclick=function() { // parcourt tous les corps de cette table et les affiche ou les // var tb=this.parentNode.getElementsByTagName('tbody'); i=0;i<tb.length;i++) { tb[i].style.display=tb[i].style.display=='none'?'':'none' } // modifie l'image en conséquence; var li=this.getElementsByTagName('img')[0]; li.src=li.src.indexOf(collapsePic)==-1?collapsePic:expandPic; } // si les corps doivent être réduits initialement, faites-le si (initialCollapse) { var tb=t[i].getElementsByTagName('tbody'); for(var j=0;j<tb.length;j++) { tb[j].style.display='none' } } // ajoute l'image entourée d'un lien factice pour permettre au clavier // d'accéder à la dernière cellule du pied de page var newa=document.createElement('a'); {return false;} var newimg=document.createElement('img'); newimg.src=initialCollapse?expandPic:collapsePic; var tf=t[i].getElementsByTagName('tfoot')[0]; getElementsByTagName('td')[tf.getElementsByTagName('td').length-1]; newa.appendChild(newimg); lt.insertBefore(newa,lt.firstChild); .onload=tablecollapse; </script> <style type="text/css"> body{ font-family:Arial,Sans-Serif; font-size:90%; f8f8f8 ; remplissage : 2em ; largeur : 40em ; } h1{ font-family : "Trebuchet MS", Sans-serif ; couleur : majuscule ; :30em; } table.footcollapse caption{ font-size:120%; text-transform:uppercase; text-align:left; padding:.5em 1em; ,table.footcollapse th,table.footcollapse th { border:none; border-collapse:collapse } table.footcollapse thead { width:10em; border-width:1px; #69c #69c #cff; background:#9cf; padding:2px 10px; } table.footcollapse tfoot th, table.footcollapse tfoot td { border-style:solide-largeur:1px; #369 #9cf; arrière-plan : #69c ; remplissage : 2px 10px ; } table.footcollapse tbody{ background :#ddd; } table.footcollapse tbody ; th{ padding:2px 10px; border:1px solid #999; border-left:none; } table.footcollapse tbody tr.odd{ background:#ccc; bottom; padding-left:10px; float:right; } </style> </head> <body> <table summary="CD que j'ai écoutés récemment" class="footcollapse"> <caption>Mes CD récents</caption > <thead> <tr> <th>Titre</th> <th>Artiste</th> <th>Qualité</th> </tr> </thead> <tfoot> <tr> <th>Total< /th> <td colspan="2">5 CD</td> </tr> </tfoot> <tbody> <tr> <th>Front 242</th> <td>Front By Front</td> <td>Tout à fait OK</td> </tr> <tr class="odd"> <th>Miss Kittin</th> <td>i.com</td> <td>bon achat</td> < /tr> <tr> <th>Die Fantastischen Vier</th> <td>Viel</td> <td>Joli retour</td> </tr> <tr class="odd"> <th>Nine Inch Ongles</th> <td>Avec des dents</td> <td>Oh oui, enfin un nouveau</td> </tr> <tr> <th>Déchets</th> <td>Saigne comme moi< /td> <td>Besoin de plus d'écoute</td> </tr> </tbody> </table> <table summary="DVD que j'ai regardés récemment" class="footcollapse"> <caption>Mes DVD récents</caption > <thead> <tr> <th>Titre</th> <th>Qualité</th> </tr> </thead> <tfoot> <tr> <th>Total</th> <td>5 DVD </td> </tr> </tfoot> <tbody> <tr> <th>Star Trek TNG Saison 7</th> <td>Ils l'ont perdu</td> </tr> <tr class="odd "> <th>Big Fish</th> <td>Conte merveilleux</td> </tr> <tr> <th>Closer</th> <td>Je veux récupérer mon temps !</td> </ tr> tr> <tr class="odd"> <th>Hot Shots</th> <td>Ça vaut toujours le coup</td> </tr> <tr> <th>La fête</th> <td> Dommage qu'il n'y ait pas plus de vendeurs</td> </tr> </tbody> </table> </body> </html>