|
Posté le 08/09/2008 @ 06:41 |
Astucien
| Bonjour,
Voilà j'ai "trouvé" ce script pour faire un menu (non pas miam miam) je cherche à le modifier,par exemple sous acceuil je voudrais faire deux sous menu,je voudrais changer la couleur du fond et des lettres des menus,rajoutter des sous menus et peut etre d'autres menus,la couleur des rectangle qui affiche les sous menus...le personaliser...mais chaque fois que j'ai touché au code,je fais des erreurs...si vous pouvez m'aider ou me diriger,merci
|
|
|
|
|
|
Posté le 08/09/2008 à 06:47 |
Grande Maîtresse astucienne | Oui, mais ce serait plus facile si on le voyait, ce menu...
En attendant, . |
|
Posté le 08/09/2008 à 07:01 |
Astucien
| elle
le voici
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title> Menu déroulant horizontal </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> <!-- window.onload=montre; function montre(id) { var d = document.getElementById(id); for (var i = 1; i<=10; i++) { if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';} } if (d) {d.style.display='block';} } //--> </script> <style type="text/css"> <!-- body { margin: 0; padding: 0; background: white; font: 80% verdana, arial, sans-serif; } dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #menu { position: absolute; top: 0; left: 0; z-index:100; width: 100%; } #menu dl { float: left; width: 12em; margin: 0 1px; } #menu dt { cursor: pointer; text-align: center; font-weight: bold; background: #ccc; border: 1px solid gray; } #menu dd { border: 1px solid gray; } #menu li { text-align: center; background: #fff; } #menu li a, #menu dt a { color: #000; text-decoration: none; display: block; height: 100%; border: 0 none; } #menu li a:hover, #menu dt a:hover { background: #eee; } a {text-decoration: none; color: black; color: #222; } --> </style> </head> <body> <div id="menu"> <dl> <dt onmouseover="javascript:montre();"> <a href="#" title="Retour à l'accueil">Accueil</a> </dt> </dl> <dl> <dt onmouseover="javascript:montre('smenu1');"> Menu 1 </dt> <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');"> <ul> <li> <a href="#">Sous-Menu 1.1</a></li> <li> <a href="#">Sous-Menu 1.2</a></li> <li> <a href="#">Sous-Menu 1.3</a></li> <li> <a href="#">Sous-Menu 1.4</a></li> <li> <a href="#">Sous-Menu 1.5</a></li> <li> <a href="#">Sous-Menu 1.6</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu2');"> Menu 2 </dt> <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');"> <ul> <li> <a href="#">Sous-Menu 2.1</a></li> <li> <a href="#">Sous-Menu 2.2</a></li> <li> <a href="#">Sous-Menu 2.3</a></li> <li> <a href="#">Sous-Menu 2.4</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu3');"> Menu 3 </dt> <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');"> <ul> <li> <a href="#">Sous-Menu 3.1</a></li> <li> <a href="#">Sous-Menu 3.2</a></li> <li> <a href="#">Sous-Menu 3.3</a></li> <li> <a href="#">Sous-Menu 3.4</a></li> <li> <a href="#">Sous-Menu 3.5</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu4');"> Menu 4 </dt> <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');"> <ul> <li> <a href="#">Sous-Menu 4.1</a></li> <li> <a href="#">Sous-Menu 4.2</a></li> <li> <a href="#">Sous-Menu 4.3</a></li> </ul> </dd> </dl> </div> </body> </html> |
|