Exercice HTML: Menu Verticale en HTML et CSS

Ecrire le code qui permet de réaliser  le Menu Suivant:


 Télécharger cette imege pour vous aider à faire le fond du menu:
 

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071head link rel='stylesheet' type='text/css' href='menu_style.css'/head>div class="outer">div id="menu" >ul li>a href="#1" title="Home"Home/>a/>li li>a href="#2" title="About"About/>a/>li li>a href="#3" title="Services"Services/>a/>li li>a href="#4" title="Portfolio"Portfolio/>a/>li li>a href="#5" title="Store"Store/>a/>li li>a href="menu1.zip" title="Download"Download Menu/>a/>li />ul />div/>div------------------------------------------------------------------------------------------------------menu_style.css/* V2 */.outer{ list-style:none; margin:0px; padding:0px;}#menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-width: 1px; }#menu ul{ list-style:none; margin:0px; padding:0px; }#menu li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; font-weight:normal; } #menu li a:link, #menu li a:visited { color: #FFFFFF; display: block; background: url(images/v6.gif); background-repeat:no-repeat; padding: 8px 0 0 50px; }#menu li a:hover { color: #666666; background: url(images/v6.gif) 0 -32px; background-repeat:no-repeat; padding: 8px 0 0 50px; }#menu li a:active { color: #666666; background: url(images/v6.gif) 0 -64px; background-repeat:no-repeat; padding: 8px 0 0 50px; }

Exercice HTML: Entré de Style sur un Texte

Ecrire le code Html et CSS qui permet de réaliser le texte suivant:


12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576HTML> HEAD> TITLE>demo style global /TITLE> STYLE TYPE="text/css"> P { border-style: dashed; width: 400px /* border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red*/ }/STYLE> /HEAD> BODY> P> On peut subdiviser la marge, la bordure et l'espacement selon qu'il s'agisse du côté gauche, droite, haut ou bas (ex. dans le schéma, "MG" mis pour marge gauche [ndt. margin-left], "ED" mis pour espacement droit [ndt. padding-right], "BH" mis pour bordure haute [ndt. border-top], etc.). On appelle le périmètre de chacune des quatre aires (contenu, espacement, bordure et marge) un "bord", chaque boîte a donc quatre bords : Le bord du contenu ou bord interne Celui-ci entoure le rendu du contenu de l'élément. Le bord de l'espacement Celui-ci entoure la boîte de l'espacement. Si la valeur de l'espacement est 0, son bord est confondu avec celui du contenu. Le bord d'espacement d'une boîte définit le bord du bloc conteneur établi par la boîte ; Le bord de la bordure Celui-ci entoure la boîte de la bordure. Si la valeur de la bordure est 0, son bord est confondu avec celui de l'espacement. Le bord de la marge ou bord externe Celui-ci entoure la boîte de la marge. Si la valeur de la marge est 0, son bord est confondu avec celui de la bordure. On peut se référer à chacun de ces bords selon qu'il se trouve du côté gauche, droite, haut ou bas. Les dimensions de l'aire du contenu d'une boîte, celles-ci étant la largeur du contenu et la hauteur du contenu, dépendent de plusieurs facteurs : l'élément générant la boîte a-t-il une propriété 'width' ou bien 'height', la boîte contient-elle du texte ou d'autres boîtes, la boîte est-elle une table, etc. Les largeurs et hauteurs des boîtes sont traitées dans le chapitre concernant les détails du modèle de mise en forme visuel. On obtient la largeur de la boîte en additionnant les marges, bordures et espacements gauches et droites avec le largeur du contenu. De même pour la hauteur de la boîte, en additionnant les marges, bordures et espacement hauts et bas avec la hauteur du contenu. Le style qui est appliqué à l'arrière-plan du contenu et aux aires de l'espacement et de la marge, est spécifié au travers de la propriété 'background' de l'élément qui génère la boîte. L'arrière-plan des marges est toujours transparent. /P> /BODY>/HTML>

Exercice HTML: Les propriétés sur les textes

´EcrivezlecodeXHTMLpermettantder´ealiserlapagerepr´esent´eesurla?gureci-dessous.:

 

12345678910111213141516171819202122232425262728293031323334353637383940html>head>title>document utilisant CSS2/title>meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">link rel="stylesheet" type="text/css" href="document-css2.css">/head>body>h1 class="rouge"> titre de niveau 1/h1>h2 class="grasRouge">titre de niveau 2/h2>h3 class="premiere">titre de niveau 3/h3>p class="grasRouge"> le seul paragraphe du document/p>p class="premiere" id="vert"> le seul paragraphe du document/p>table align="center" border=6 cellpadding=6 cellspacing="auto">caption align="center" class="premiere">les propriétés sur les textes/caption>th align="center">mode CSS/th>th align="center">réglage/th>tr>td>font-size/th>td>taille des caractères/td>/tr>tr>td>font-style/th>td>normal ou italique/td>/tr>tr>td>font-family/th>td>empattement, proportionnalité/td>/tr>tr>td>font-weight/th>td>graisse des caractères/td>/tr>tr>td>font-height/th>td>interligne/td>/tr>tr>td>text-align/th>td>alignement, justification/td>/tr>tr>td>text-indent/th>td>décalage première ligne/td>/tr>tr>td>text-transform/th>td>capitalisation, casse/td>/tr>/table> BR>table align="center" border=6 cellpadding=6 cellspacing="auto">caption align="center" class="premiere">la manipulation des blocs/caption>th align="center">mode CSS/th>th align="center">réglage/th>tr>td>margin-right/th>td>marge à droite/td>/tr>tr>td>margin-left/th>td>marge à gauche/td>/tr>tr>td>margin-top/th>td>marge en haut/td>/tr>tr>td>margin-bottom/th>td>marge en bas/td>/tr>tr>td>padding-right/th>td>blanc à droite/td>/tr>tr>td>padding-left/th>td>blanc à gauche/td>/tr>tr>td>padding-top/th>td>blanc en haut/td>/tr>tr>td>padding-bottom/th>td>blanc en bas/td>/tr>/table>/body>/html>

Exercice HTML: Facture de commande des Livres

Ecrire un code HTML qui permet de réaliser un Tableau pour iditer la Facture de commande des lives en utilisant les feuilles de Styles

Interface Graphique:

 

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">head>title>Groupement de colonnes/title>meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />link rel="shortcut icon" type="images/x-icon" href="../images/favicon.ico" />style type="text/css" title="">.gras{font-weight:bold; background-color: red;}.prix{background-color: yellow;}.date{background-color:#AAA;color:blue;}/style>/head>body>table border="5" width="100%" rules="groups" summary="Facture de livres"? cellpadding="5">caption>big>Facture de votre commande de livres/big>/caption>colgroup id="date" width="10%" span="1" align="center" class="date">/colgroup>colgroup id="titre" span="2" width="25%" align="left" class="gras">/colgroup>colgroup id="prix" span="3" align="right" class="prix">col width="10%" />col span="2" width="15%" />/colgroup>thead>tr>th>Date /th>th>Titre /th> th>Auteur/th> th>Quantité /th>? th>Prix Unitaire /th> th>Prix Total /th> /tr> /thead>tfoot>tr>th>Date /th> th>Désignation /th> th>Auteur/th> th>Quantité? /th> th>Prix Unitaire /th> th>Prix Total /th> /tr>/tfoot>tbody>tr>td>29/05/2005/td>td>XHTML Design/td>td>Jeffrey Zeldman/td>td>3/td>? td>32.00 €/td>td>96.00 €/td>/tr>tr>td>15/06/2005/td>td>CSS 2 /td>td>Raphael Goetter/td>td>2/td>? td>30.00 €/td>td>60.00 €/td>/tr>tr>td>10/09/2005/td>td>XHTML et CSS /td>td>Jean Engels/td>td>5/td>? td>29.90 €/td>td>149.50 €/td>/tr>/tbody>/table>/body>/html>

 Exercice HTML: Fiche de renseignements

Ecrire le code HTML correspondant pour créer le Formulaire suivant:


1234567891011121314151617181920212223242526272829303132333435363738394041424344CENTERTABLE border=3TRTDH2uCENTERFiche de renseignements/CENTER/u/H2FORM NAME="Fiche_inscription"Nom : INPUT TYPE ="text" NAME="Nom" VALUE="" >Prénom : INPUT TYPE ="text" NAME="Prenom" VALUE="" >Mot de passe : INPUT TYPE="password" NAME="Pass" SIZE=5PVous êtes en terminale S à dominante : INPUT TYPE="radio" NAME="option" VALUE="math" checked>MathématiquesINPUT TYPE="radio" NAME="option" VALUE="pc"Physique-chimieINPUT TYPE="radio" NAME="option" VALUE="svt"SVTPQuelle est votre discipline préférée ?BRCENTERSELECT NAME="disciplines" MULTIPLE SIZE=3 OPTIONPhysique OPTION SELECTED>Informatique OPTIONPhilosophie OPTIONMathématiques OPTIONLangues OPTIONSVT OPTIONHistoire OPTIONEPS/SELECT/CENTERPVous vous êtes inscrit(e)s en : BRCENTERTABLE border=2TRTDINPUT TYPE="checkbox" CHECKED NAME="DEUG" >DEUGBRINPUT TYPE="checkbox" NAME="CPGE"CPGEBRINPUT TYPE="checkbox" NAME="BTS"BTSBRINPUT TYPE="checkbox" NAME="IUT"IUTBRINPUT TYPE="checkbox" NAME="AUTRE"AUTRE/TD/TR/TABLE/CENTERPEcrivez ci-dessous le sujet de votre projet informatique :BRCENTERTEXTAREA NAME="Projet" ROWS=8 COLS=55Voici mon projet d'option informatique/TEXTAREA/CENTERPINPUT TYPE="RESET" VALUE="Effacer Pour recommencer"INPUT TYPE="SUBMIT" VALUE="Valider" >P/FORM >/TD/TR/TABLE/CENTER

Exercice HTML: Fonctions

Ecrire le code HTML qui prmet de réaliser le formulaire suivant:



12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455htmlheadscript language ="javascript"function controle(){var a =eval(document.form.input.value);var b =eval(document.form.input1.value);document.form.input3.value=a+b}function production(){var a =eval(document.form.input.value);var b =eval(document.form.input1.value);document.form.input3.value=a*b}function soustraction(){var a =eval(document.form.input.value);var b =eval(document.form.input1.value);document.form.input3.value=a-b}--------------------------------------function choixprop(form){if(form.choix[0].checked){ controle()};if(form.choix[1].checked){ production()};if(form.choix[2].checked){ soustraction()};}/script/headbody bgcolor=#abcdef>form name="form"Enter le numero 1 input type ="text" name="input" >brEnter le numero 2 input type ="text" name="input1" >brEnter le numero 3 input type ="text" name="input2" >brLA somme est input type ="text" name="input3" >brbrbrinput type ="button" name="bouton" value="contrôler" onclick="soustraction(form)"br---------------------------brbrbrinput type="radio" name= "choix" value="1" > choix 1brinput type="radio" name= "choix" value="2" > choix 2brinput type="radio" name= "choix" value="3" > choix 3brinput type="button" name= "bouton" value="verfiez votre choix" onClick="choixprop(form)"br/form/body/html

Exercice HTML: Menu Dynamique

Travail à Faire:

Ecrire le code HTML et CSS qui permet de réaliser le Menu suivant:



Télécharger les images suivantes Afin de pouvoir réaliser le Menu demandé:
         

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869/* CSS Document */*{ margin:0; padding:0;}#menu{ width:90%; margin:25px auto;}#menu ul{ list-style:none;}#menu li{ display:block; float:left;}#menu li a{ background:#749b10 url(images/menu_bg.gif) repeat-x; border:2px solid #80a225; margin:0 1px; padding:15px 15px 15px 15px; display:block; float:left; color:#fff; text-transform:uppercase; text-decoration:none; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; height: 50px;}#menu li a span{ color:#52651f; font-size:10px; text-transform:lowercase; font-family:Geneva, Arial, Helvetica, sans-serif; font-weight:normal;}#menu li a:hover{ background:#e46825 url(images/menu_hover.gif) repeat-x; border:2px solid #c04118; text-decoration:none;}#menu li a:hover span{ color:#ffd9c7;}.current{ background:#e46825 url(images/menu_hover.gif) repeat-x; border:2px solid #c04118; margin:0 1px; padding:15px 15px 15px 15px; display:block; float:left; color:#fff; text-transform:uppercase; text-decoration:none; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:13px; cursor:pointer; font-weight:bold; height: 50px;}.current span{ color:#ffd9c7; font-size:10px; text-transform:lowercase; font-family:Geneva, Arial, Helvetica, sans-serif; font-weight:normal;}
123456789101112131415161718head>meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />title>Green Menu/title>link href="menu.css" rel="stylesheet" type="text/css" />/head>body>div id="menu"> ul> li class="current">Homebr />span>takes you tobr /> home page/span>/li> li>a href="#">About Usbr />span>takes you tobr />about us page/span>/a>/li> li>a href="#">Productsbr />span>takes you tobr />products page/span>/a>/li> li>a href="#">Partnersbr />span>takes you tobr />partners page/span>/a>/li> li>a href="#">Contact Usbr />span>takes you tobr />contact page/span>/a>/li> /ul>/div>/body>/html>

Exercice HTML: SECTION3

Ecrireble code qui permet de réaliser la page suivante:



12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849HTML> HEAD> TITLE>Titre du document/TITLE> /HEAD> BODY>HR>HR>HR>HR>HR>HR>HR>HR>HR>HR> P>Les hyperliens vers une section du même document (liens internes) On doit d'abord poser une ancre, soit une étiquette qui permette de marquer le début d'une section du document afin de l'utiliser pour un lien L'ancre doit se faire avec l'étiquette A et l'attribut name selon la syntaxe suivante : P>Consultez la A href="#sect3">section 3/A> de ce document./P> Les éléments de niveau texte permettent de qualifier le texte à l’intérieur d’un élément de niveau bloc (par exemple un paragraphe), d’une liste ou d’un tableau N’impliquent pas de saut de ligneHR>HR>HR>HR>HR>HR>HR>HR>HR>HR>HR>HR>HR>HR>HR>HR>HR>HR>HR>HR> A name="sect3">SECTION3: On peut ensuite y référer n'importe où dans le document, en inscrivant comme adresse URL le nom de l'ancre précédé de « # »/A> /BODY>/HTML>

Exercice HTML: Site Web

Ecrire le code qui permet de réaliser la page suivant:



123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">head> meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> title>New Page/title> meta name="description" content="Description" /> meta name="keywords" content="Keywords" /> link rel="stylesheet" href="style.css" type="text/css" media="screen" /> script type="text/javascript" src="jquery.js">/script> script type="text/javascript" src="script.js">/script>/head>body>div id="art-page-background-glare"> div id="art-page-background-glare-image"> /div>/div>div id="art-main"> div class="art-sheet"> div class="art-sheet-tl">/div> div class="art-sheet-tr">/div> div class="art-sheet-bl">/div> div class="art-sheet-br">/div> div class="art-sheet-tc">/div> div class="art-sheet-bc">/div> div class="art-sheet-cl">/div> div class="art-sheet-cr">/div> div class="art-sheet-cc">/div> div class="art-sheet-body"> div class="art-header"> div class="art-header-clip"> div class="art-header-center"> div class="art-header-png">/div> div class="art-header-jpeg">/div> /div> /div> div class="art-logo"> h1 class="art-logo-name">a href="./index.html">Enter Site Title/a>/h1> h2 class="art-logo-text">Enter Site Slogan/h2> /div> /div> div class="cleared reset-box">/div>div class="art-nav"> div class="art-nav-l">/div> div class="art-nav-r">/div>div class="art-nav-outer"> ul class="art-hmenu"> li> a href="./new-page.html" class="active">span class="l">/span>span class="r">/span>span class="t">New Page/span>/a> /li> li> a href="./new-page-2.html">span class="l">/span>span class="r">/span>span class="t">New Page 2/span>/a> /li> /ul>/div>/div>div class="cleared reset-box">/div>div class="art-content-layout"> div class="art-content-layout-row"> div class="art-layout-cell art-sidebar1">div class="art-vmenublock"> div class="art-vmenublock-body"> div class="art-vmenublockheader"> h3 class="t">Vertical Menu/h3> /div> div class="art-vmenublockcontent"> div class="art-vmenublockcontent-body"> ul class="art-vmenu"> li> a href="./new-page.html" class="active">span class="l">/span>span class="r">/span>span class="t">New Page/span>/a> /li> li> a href="./new-page-2.html">span class="l">/span>span class="r">/span>span class="t">New Page 2/span>/a> /li> /ul> div class="cleared">/div> /div> /div> div class="cleared">/div> /div>/div>div class="art-block"> div class="art-block-body"> div class="art-blockheader"> h3 class="t">New Block/h3> /div> div class="art-blockcontent"> div class="art-blockcontent-body"> p>Enter Block content here.../p>p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, tellus sit amet congue vulputate, nisi erat iaculis nibh, vitae feugiat sapien ante eget mauris. /p> div class="cleared">/div> /div> /div> div class="cleared">/div> /div>/div> div class="cleared">/div> /div> div class="art-layout-cell art-content">div class="art-post"> div class="art-post-body">div class="art-post-inner art-article"> h2 class="art-postheader"> New Page /h2> div class="cleared">/div> div class="art-postcontent">p>Enter Page content here.../p>p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, tellus sit amet congue vulputate, nisi erat iaculis nibh, vitae feugiat sapien ante eget mauris. Cras elit nisl, rhoncus nec iaculis ultricies, feugiat eget sapien. Pellentesque ac felis tellus./p>p>Aenean sollicitudin imperdiet arcu, vitae dignissim est posuere id. Duis placerat justo eu nunc interdum ultrices. Phasellus elit dolor, porttitor id consectetur sit amet, posuere id magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit./p>p> Suspendisse pharetra auctor pharetra. Nunc a sollicitudin est. Curabitur ullamcorper gravida felis, sit amet scelerisque lorem iaculis sed. Donec vel neque in neque porta venenatis sed sit amet lectus. Fusce ornare elit nisl, feugiat bibendum lorem. Vivamus pretium dictum sem vel laoreet. In fringilla pharetra purus, semper vulputate ligula cursus in. Donec at nunc nec dui laoreet porta eu eu ipsum. Sed eget lacus sit amet risus elementum dictum./p> /div> div class="cleared">/div> /div> div class="cleared">/div> /div>/div> div class="cleared">/div> /div> /div> /div> div class="cleared">/div> div class="art-footer"> div class="art-footer-t">/div> div class="art-footer-l">/div> div class="art-footer-b">/div> div class="art-footer-r">/div> div class="art-footer-body"> a href="#" class="art-rss-tag-icon" title="RSS">/a> div class="art-footer-text"> p>a href="#">Link1/a> | a href="#">Link2/a> | a href="#">Link3/a>/p>p>Copyright © 2011. All Rights Reserved./p> /div> div class="cleared">/div> /div> /div> div class="cleared">/div> /div> /div> div class="cleared">/div> p class="art-page-footer">a href="">Website Template created with Artisteer./a> /p>/div>/body>/html>

Exercice HTML: Menu avec CSS

Créer un ?chier CSS permettant d’obtenir le menu donné par la ?gure:


à partir du code HTML suivant:

123456ul class="menu"> li>a href="accueil.html">Accueil/a>/li> li class="active">a href="infos.html">Infos/a>/li> li>a href="contact.html">Contact/a>/li> li>a href="login.html">Se connecter/a>/li>/ul>


Pour cela, on pourra utiliser les propriétés :
–-moz-border-radius-topleft:10px;
–-moz-border-radius-topright: 10px;
pour obtenir les arrondis sur les coins des bordures.
Remarque : La propriétéborder-radius n’est pas encore supportée par tous les navigateurs.
Par conséquent, pour un site Web devant être compatible avec tous les navigateurs, ilfaudrait utiliser des images de fond pour obtenir le même résultat, ce qui complexi?e le travail.
Deplus, certains validateurs peuvent considérer l’utilisation de cette propriété comme une erreur.

123456789101112131415161718192021222324252627.menu li { display: inline; list-style:none; border: 1px solid black; padding: 4px; background-color: #bbb; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; } .menu a { text-decoration: none; color: black; } .menu li.active { background-color: white; border-bottom: 0px; } .menu li:hover { background-color: #ecc; }

Exercice HTML: Arbre Menu

Ecrire le code qui permet de réaliser la Figure suivante:

il s'agit de réaliser un petit menu Dynamique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126html>head>title>Exemple/title>script type="text/javascript"> function treeMenu_init(menu, data) { var array = new Array(0); if(data != null && data != "") { array = data.match(/\d+/g); } var items = menu.getElementsByTagName("li"); for(var i = 0; i ) { items[i].onclick = treeMenu_handleClick; if(!treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened") && items[i].getElementsByTagName("ul").length + items[i].getElementsByTagName("ol").length > 0) { var classes = treeMenu_getClasses(items[i]); if(array.length > 0 && array[0] == i) { classes.push("treeMenu_opened") } else { classes.push("treeMenu_closed") } items[i].className = classes.join(" "); if(array.length > 0 && array[0] == i) { array.shift(); } } } } function treeMenu_handleClick(event) { if(event == null) { //solution de rechange pour les propriétés DOM faisant défaut dans l'IE event = window.event; event.currentTarget = event.srcElement; while(event.currentTarget.nodeName.toLowerCase() != "li") { event.currentTarget = event.currentTarget.parentNode; } event.cancelBubble = true; } else { event.stopPropagation(); } var array = treeMenu_getClasses(event.currentTarget); for(var i = 0; i ) { if(array[i] == "treeMenu_closed") { array[i] = "treeMenu_opened"; } else if(array[i] == "treeMenu_opened") { array[i] = "treeMenu_closed" } } event.currentTarget.className = array.join(" "); } /* * Renvoie toutes les classes affectées à un élément HTML * * element: l'élément HTML * return: les classes affectées */ function treeMenu_getClasses(element) { if(element.className) { return element.className.match(/[^ \t\n\r]+/g); } else { return new Array(0); } } /* * Vérifie si un tableau contient un élément déterminé. * array: le tableau * element: l'élément * return: true, si le tableau contient l'élément. */ function treeMenu_contains(array, element) { for(var i = 0; i if(array[i] == element) { return true; } } return false; } /* * Renvoie une chaîne de caractères dans laquelle figurent tous les * points du menu ouverts. * * menu: référence à la liste * return: la chaîne de caractères */ function treeMenu_store(menu) { var result = new Array();; var items = menu.getElementsByTagName("li"); for(var i = 0; i if(treeMenu_contains(treeMenu_getClasses(items[i]), "treeMenu_opened")) { result.push(i); } } return result.join(" "); }style type="text/css"> li.treeMenu_opened ul { display: block; } li.treeMenu_closed ul { display: none; }/style>body onload="treeMenu_init(document.getElementById('menu'), '')">ul id="menu"> li>Premièrement ul> li>A/li> li>B/li> /ul> /li> li>Deuxièmement ul> li>a/li> li>b/li> /ul> /li>/ul>/body>/html>
Article publié le 09 Janvier 2012 Mise à jour le Jeudi, 15 Décembre 2022 18:59 par BENKIRANE Fatima Ezzahra