Exercice HTML: Menu Verticale en HTML et CSS
Rédigé par GC Team, Publié le 09 Janvier 2012, Mise à jour le Jeudi, 15 Décembre 2022 18:59Ecrire le code qui permet de réaliser le Menu Suivant:
Télécharger cette imege pour vous aider à faire le fond du menu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
head 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<HTML> <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.:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<html> <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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
"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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
CENTERTABLE border=3 TRTD H2uCENTERFiche de renseignements/CENTER/u/H2 FORM 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=5P Vous êtes en terminale S à dominante : INPUT TYPE="radio" NAME="option" VALUE="math" checked>Mathématiques INPUT TYPE="radio" NAME="option" VALUE="pc"Physique-chimie INPUT TYPE="radio" NAME="option" VALUE="svt"SVT P Quelle est votre discipline préférée ?BR CENTERSELECT NAME="disciplines" MULTIPLE SIZE=3 OPTIONPhysique OPTION SELECTED>Informatique OPTIONPhilosophie OPTIONMathématiques OPTIONLangues OPTIONSVT OPTIONHistoire OPTIONEPS /SELECT/CENTER P Vous vous êtes inscrit(e)s en : BR CENTERTABLE border=2TRTD INPUT TYPE="checkbox" CHECKED NAME="DEUG" >DEUGBR INPUT TYPE="checkbox" NAME="CPGE"CPGEBR INPUT TYPE="checkbox" NAME="BTS"BTSBR INPUT TYPE="checkbox" NAME="IUT"IUTBR INPUT TYPE="checkbox" NAME="AUTRE"AUTRE /TD/TR /TABLE/CENTER P Ecrivez ci-dessous le sujet de votre projet informatique :BR CENTERTEXTAREA NAME="Projet" ROWS=8 COLS=55 Voici mon projet d'option informatique /TEXTAREA/CENTER P INPUT 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
html head script 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 /head body bgcolor=#abcdef> form name="form" Enter le numero 1 input type ="text" name="input" >br Enter le numero 2 input type ="text" name="input1" >br Enter le numero 3 input type ="text" name="input2" >br LA somme est input type ="text" name="input3" >br br br input type ="button" name="bouton" value="contrôler" onclick="soustraction(form)" br---------------------------br br br input type="radio" name= "choix" value="1" > choix 1br input type="radio" name= "choix" value="2" > choix 2br input type="radio" name= "choix" value="3" > choix 3br input 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é:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
/* 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; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<head> <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">Home<br /><span>takes you to<br /> home page</span></li> <li><a href="#">About Us<br /><span>takes you to<br />about us page</span></a></li> <li><a href="#">Products<br /><span>takes you to<br />products page</span></a></li> <li><a href="#">Partners<br /><span>takes you to<br />partners page</span></a></li> <li><a href="#">Contact Us<br /><span>takes you to<br />contact page</span></a></li> </ul> </div> </body> </html> |
Exercice HTML: SECTION3
Ecrireble code qui permet de réaliser la page suivante:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<HTML> <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 ligne <HR><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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 |
<html 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:
1 2 3 4 5 6 |
ul 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
<html> <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.length; 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 < array.length; 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 < array.length; 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 < items.length; 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> |