Modifications pour le document Code test
Modifié par Quentin / Zèbre STURER le 2021/12/16 23:14
- Gérer
Copier- Actions
Exporter
Aperçu avant impression- Affichage
Code source
Pages filles
Contenu
Commentaires
Pièces Jointes
Informations
J'aime
<
>
modifié par Quentin / Zèbre STURER
sur 2021/11/25 18:54
sur 2021/11/25 18:54
modifié par Quentin / Zèbre STURER
sur 2021/11/23 20:57
sur 2021/11/23 20:57
Commentaire de modification :
Il n'y a aucun commentaire pour cette version
Afficher le contexte
Masquer le contexte
Résumé
Détails
-
Propriétés de la Page
-
- Contenu
-
... ... @@ -1,15 +1,190 @@ 1 1 2 2 {{html}} 3 -<!DOCTYPE html>3 +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 4 <html> 5 5 <head> 6 - <meta charset="utf-8"> 7 - <link rel="stylesheet" type="text/css" href="bas.css"> 8 - <title></title> 6 +<title>Menu déroulant en Javascript</title> 7 +<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> 8 + 9 +<script type="text/javascript"> 10 +<!-- 11 +window.onload=montre; 12 +function montre(id) 13 + { 14 + var d = document.getElementById(id); 15 + for (var i = 1; i<=10; i++) 16 + { 17 + if (document.getElementById('smenu'+i)) 18 + {document.getElementById('smenu'+i).style.display='none';} 19 + } 20 + if (d) 21 + {d.style.display='block';} 22 + } 23 +//--> 24 +</script> 25 + 26 + 27 +<style type="text/css"> 28 +<!-- 29 +/* CSS issu des tutoriels http://css.alsacreations.com */ 30 +body { 31 +margin: 0; 32 +padding: 0; 33 +background: white; 34 +font: 80% verdana, arial, sans-serif; 35 +} 36 +dl, dt, dd, ul, li { 37 +margin: 0; 38 +padding: 0; 39 +list-style-type: none; 40 +} 41 +#menu { 42 +position: absolute; 43 +top=; 44 +bottom:80%; 45 +left: 0px; 46 +z-index:100px; 47 +width: 100%; 48 +} 49 +#menu dl { 50 +float: left; 51 +width: 12em; 52 +position: relative; 53 +margin: 0 2px; 54 +} 55 +#menu dt { 56 +cursor: pointer; 57 +text-align: center; 58 +font-weight: bold; 59 +background: #ccc; 60 +border: 1px solid gray; 61 + 62 +} 63 +#menu dd { 64 +background-color: #ccc; 65 +position: absolute; 66 +bottom:1.5em; 67 +width:100%; 68 +} 69 +#menu li { 70 +text-align: center; 71 +} 72 +#menu li a, #menu dt a { 73 +color: #000; 74 +text-decoration: none; 75 +display: block; 76 +height: 100%; 77 +border: 0 none; 78 +} 79 +#menu li a:hover, #menu dt a:hover { 80 +background: #eee; 81 +} 82 + 83 +#site { 84 +position: absolute; 85 +z-index: 1; 86 +top : 70px; 87 +left : 10px; 88 +color: #000; 89 +background-color: #ddd; 90 +padding: 5px; 91 +border: 1px solid gray; 92 +} 93 + 94 +a {text-decoration: none; 95 +color: black; 96 +color: #222; 97 +} 98 +--> 99 +</style> 9 9 </head> 10 -<body> 11 - <footer style="display: inline-block;width: 100%; margin: 0 auto; background-color:#0A4E8C ;position: sticky; bottom: 0px;border: solid;"> 12 - </footer> 101 + 102 +<body > 103 + 104 +<div id="menu" > 105 +<dl> 106 +<dt onmouseover="javascript:montre();"><a href="#" title="Retour à l'accueil">Accueil</a></dt> 107 +</dl> 108 + 109 +<dl> 110 +<dt onmouseover="menuDeroulant('smenu1');" >Menu 1</dt> // faire apparaitre smenu1 passage de la souris 111 +<dd id="smenu1" style="display:none;" > // ne pas l'afficher 112 +<ul > 113 +<li><a href="#">Sous-Menu 1.1</a></li> 114 + 115 +<li><a href="#">Sous-Menu 1.2</a></li> 116 +<li><a href="#">Sous-Menu 1.3</a></li> 117 +<li><a href="#">Sous-Menu 1.4</a></li> 118 +<li><a href="#">Sous-Menu 1.5</a></li> 119 +<li><a href="#">Sous-Menu 1.6</a></li> 120 +</ul> 121 + 122 +</dd> 123 +</dl><dl> 124 +<dt onmouseover="menuDeroulant('smenu1');" >Menu 1</dt> 125 + 126 +<dd id="smenu1" style="display:none;" > // ne pas l'afficher 127 +<ul > 128 +<li><a href="#">Sous-Menu 1.1</a></li> 129 + 130 +<li><a href="#">Sous-Menu 1.2</a></li> 131 +<li><a href="#">Sous-Menu 1.3</a></li> 132 +<li><a href="#">Sous-Menu 1.4</a></li> 133 +<li><a href="#">Sous-Menu 1.5</a></li> 134 +<li><a href="#">Sous-Menu 1.6</a></li> 135 +</ul> 136 + 137 +</dd> 138 +</dl> 139 + 140 + 141 +<dl> 142 +<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt> 143 +<dd id="smenu2"> 144 +<ul> 145 +<li><a href="#">Sous-Menu 2.1</a></li> 146 +<li><a href="#">Sous-Menu 2.2</a></li> 147 + 148 +<li><a href="#">Sous-Menu 2.3</a></li> 149 +<li><a href="#">Sous-Menu 2.4</a></li> 150 +</ul> 151 +</dd> 152 +</dl> 153 + 154 +<dl> 155 +<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt> 156 + 157 +<dd id="smenu3"> 158 + 159 +<ul> 160 +<li><a href="#">Sous-Menu 3.1</a></li> 161 +<li><a href="#">Sous-Menu 3.2</a></li> 162 +<li><a href="#">Sous-Menu 3.3</a></li> 163 +<li><a href="#">Sous-Menu 3.4</a></li> 164 + 165 +<li><a href="#">Sous-Menu 3.5</a></li> 166 + 167 +</ul> 168 +</dd> 169 +</dl> 170 + 171 +<dl> 172 +<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt> 173 +<dd id="smenu4"> 174 +<ul> 175 + 176 +<li><a href="#">Sous-Menu 4.1</a></li> 177 + 178 +<li><a href="#">Sous-Menu 4.2</a></li> 179 +<li><a href="#">Sous-Menu 4.3</a></li> 180 +</ul> 181 +</dd> 182 +</dl> 183 + 184 + 185 +</div> 186 + 187 + 13 13 </body> 14 14 </html> 15 15 {{/html}}
