Exemple de listes imbriquées
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Exemple de listes imbriquées</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Exemple de listes imbriquées</h1> </div><!-- /header --> <div data-role="content"> <ul data-role="listview"> <li> <h3>Animaux</h3> <p>Tous vos animaux favoris de l´aarkvark au zébre.</p> <ul> <li>Animaux de compagnie <ul> <li><a href="exemple-lists-nested.html">Canari</a></li> <li><a href="exemple-lists-nested.html">Chat</a></li> <li><a href="exemple-lists-nested.html">Chien</a></li> <li><a href="exemple-lists-nested.html">Gerbille</a></li> <li><a href="exemple-lists-nested.html">Iguane</a></li> <li><a href="exemple-lists-nested.html">Souris</a></li> </ul> </li> <li>Animaux de la ferme <ul> <li><a href="exemple-lists-nested.html">Canard</a></li> <li><a href="exemple-lists-nested.html">Cheval</a></li> <li><a href="exemple-lists-nested.html">Cochon</a></li> <li><a href="exemple-lists-nested.html">Mouton</a></li> <li><a href="exemple-lists-nested.html">Poulet</a></li> <li><a href="exemple-lists-nested.html">Vache</a></li> </ul> </li> <li>Animaux sauvages <ul> <li><a href="exemple-lists-nested.html">Aardvark</a></li> <li><a href="exemple-lists-nested.html">Aigle</a></li> <li><a href="exemple-lists-nested.html">Alligator</a></li> <li><a href="exemple-lists-nested.html">Castor</a></li> <li><a href="exemple-lists-nested.html">Dingo</a></li> <li><a href="exemple-lists-nested.html">Eléphant</a></li> <li><a href="exemple-lists-nested.html">Fourmi</a></li> <li><a href="exemple-lists-nested.html">Furet</a></li> <li><a href="exemple-lists-nested.html">Giraffe</a></li> <li><a href="exemple-lists-nested.html">Grenouille</a></li> <li><a href="exemple-lists-nested.html">Lion</a></li> <li><a href="exemple-lists-nested.html">Ours</a></li> <li><a href="exemple-lists-nested.html">Ours polaire</a></li> <li><a href="exemple-lists-nested.html">Panda</a></li> <li><a href="exemple-lists-nested.html">Puma</a></li> <li><a href="exemple-lists-nested.html">Singe</a></li> <li><a href="exemple-lists-nested.html">Tigre</a></li> <li><a href="exemple-lists-nested.html">Zébre</a></li> </ul> </li> </ul> </li> <li> <h3>Couleurs</h3> <p>Les couleurs de l´arc en ciel.</p> <ul> <li><a href="exemple-lists-nested.html">Bleu</a></li> <li><a href="exemple-lists-nested.html">Vert</a></li> <li><a href="exemple-lists-nested.html">Orange</a></li> <li><a href="exemple-lists-nested.html">Pourpre</a></li> <li><a href="exemple-lists-nested.html">Rouge</a></li> <li><a href="exemple-lists-nested.html">Jaune</a></li> <li><a href="exemple-lists-nested.html">Violet</a></li> </ul> </li> <li> <h3>Véhicules</h3> <p>Tous, des voitures aux avions.</p> <ul> <li>Voitures <ul> <li><a href="exemple-lists-nested.html">Acura</a></li> <li><a href="exemple-lists-nested.html">Audi</a></li> <li><a href="exemple-lists-nested.html">BMW</a></li> <li><a href="exemple-lists-nested.html">Cadillac</a></li> <li><a href="exemple-lists-nested.html">Chrysler</a></li> <li><a href="exemple-lists-nested.html">Dodge</a></li> <li><a href="exemple-lists-nested.html">Ferrari</a></li> <li><a href="exemple-lists-nested.html">Ford</a></li> <li><a href="exemple-lists-nested.html">GMC</a></li> <li><a href="exemple-lists-nested.html">Honda</a></li> <li><a href="exemple-lists-nested.html">Hyundai</a></li> <li><a href="exemple-lists-nested.html">Infiniti</a></li> <li><a href="exemple-lists-nested.html">Jeep</a></li> <li><a href="exemple-lists-nested.html">Kia</a></li> <li><a href="exemple-lists-nested.html">Lexus</a></li> <li><a href="exemple-lists-nested.html">Mini</a></li> <li><a href="exemple-lists-nested.html">Nissan</a></li> <li><a href="exemple-lists-nested.html">Porsche</a></li> <li><a href="exemple-lists-nested.html">Subaru</a></li> <li><a href="exemple-lists-nested.html">Toyota</a></li> <li><a href="exemple-lists-nested.html">Volkswagon</a></li> <li><a href="exemple-lists-nested.html">Volvo</a></li> </ul> </li> <li>Avions <ul> <li><a href="exemple-lists-nested.html">Boeing</a></li> <li><a href="exemple-lists-nested.html">Cessna</a></li> <li><a href="exemple-lists-nested.html">Derringer</a></li> <li><a href="exemple-lists-nested.html">Embraer</a></li> <li><a href="exemple-lists-nested.html">Gulfstream</a></li> <li><a href="exemple-lists-nested.html">Piper Aircraft</a></li> <li><a href="exemple-lists-nested.html">Raytheon</a></li> </ul> </li> <li>Construction <ul> <li><a href="exemple-lists-nested.html">Caterpillar</a></li> <li><a href="exemple-lists-nested.html">Ford</a></li> <li><a href="exemple-lists-nested.html">John Deere</a></li> </ul> </li> </ul> </li> </ul> </div><!-- /content --> <div data-role="footer"> <h4>Contenu du pied de page</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Voir le résultat : Exemple de listes imbriquées