Menu Drop Down imbriqué

Par Laurent | 22.11.09 15:38 | 0 commentaire(s) | programmation

Voici un script qui va vous permettre de réaliser un menu avec les langages de programmation : css, javascript et hml.
Ce menu utilise la librairie très célèbre Jquery.
Vous pourrez ainsi génerer un menu élégant à plusieurs niveaux.
Pour celà il faudra donc au préalable télécharger Jquery puis télécharger le script permettant de réaliser ce droppy menu.

Voici un exemple de code d'intégration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Example drop down menus</title> <script type='text/javascript' src='jquery-1.3.2.min.js'></script> <script type='text/javascript' src='jquery.droppy.js'></script> <link rel="stylesheet" href="droppy.css" type="text/css" /> </head> <body> <ul id='nav'> <li><a href='#'>Plats cuisinés</a></li> <li><a href='#'>Aliments</a> <ul> <li><a href='#'>Fruits</a></li> <li><a href='#'>Légumes</a> <ul> <li> <a href='#'>ex 0</a> <ul> <li><a href='#'>ex 0-0</a></li> <li><a href='#'>ex 0-1</a></li> </ul> </li> <li><a href='#'>ex 1</a></li> <li><a href='#'>ex 2</a></li> </ul> </li> <li><a href='#'>Céréales</a></li> <li><a href='#'>Viandes</a></li> </ul> </li> <li><a href='#'>Recettes</a> <ul> <li><a href='#'>Rapide < 20min</a> <ul> <li><a href='#'>ex 0</a> <ul> <li><a href='#'>ex 0-0</a></li> <li><a href='#'>ex 0-1</a></li> </ul> </ul> </li> <li><a href='#'>Plus longue < 1h</a></li> <li><a href='#'>Longue > 1h</a> <ul> <li><a href='#'>ex 0</a></li> <li><a href='#'>ex 1</a></li> <li><a href='#'>ex 2</a></li> </ul> </li> </ul> </li> </ul> <script type='text/javascript'> $(function() { $('#nav').droppy(); }); </script> </body> </html>
Voici un exemple de ce script menu imbriqué

Menu Drop Down imbriqué

Commentaires

Thèmes

Tags récents

Populaires