pimprenelle27 Administrateur
Messages : 1613 Points : 2268 Réputation : 51
| Sujet: Installation d'un menu déroulant Sam 12 Oct - 0:12 | |
| - Code:
-
<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" media="screen"> <!-- 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 { width: 15em; } #menu dt { cursor: pointer; margin: 2px 0;; height: 20px; line-height: 20px; text-align: center; font-weight: bold; border: 1px solid gray; background: #ccc; } #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; border: 0 none; height: 100%; } #menu li a:hover, #menu dt a:hover { background: #eee; } --> </style> <!-- FIN DU CSS -->
<dl id="menu">
<dt onclick="javascript:montre();"><a href="url-de-renvoi">Menu 1</a></dt>
<dt onclick="javascript:montre('smenu2');">Menu 2</dt> <dd id="smenu2"> <ul> <li><a href="url-de-renvoi">Sous-Menu 2.1</a></li> <li><a href="url-de-renvoi">Sous-Menu 2.2</a></li> <li><a href="url-de-renvoi">Sous-Menu 2.3</a></li> </ul> </dd>
<dt onclick="javascript:montre('smenu3');">Menu 3</dt> <dd id="smenu3"> <ul> <li><a href="url-de-renvoi">Sous-Menu 3.1</a></li> <li><a href="url-de-renvoi">Sous-Menu 3.1</a></li> <li><a href="url-de-renvoi">Sous-Menu 3.1</a></li> <li><a href="url-de-renvoi">Sous-Menu 3.1</a></li> <li><a href="url-de-renvoi">Sous-Menu 3.1</a></li> <li><a href="url-de-renvoi">Sous-Menu 3.1</a></li> </ul> </dd>
<dt onclick="javascript:montre('smenu4');">Menu 4</dt> <dd id="smenu4"> <ul> <li><a href="url-de-renvoi">Sous-Menu 4.1</a></li> <li><a href="url-de-renvoi">Sous-Menu 4.1</a></li> </ul> </dd> </dl> N'oubliez pas de changer : - les couleurs du menu, à remplacer par des codes hexadécimaux ( trouvables sur google ) - les adresses de redirection lorsqu'on clique sur la case voulue - les noms des menus ( menu 1, menu 2 ... ) a changer par les catégories de votre forum - les noms des sous-menus ( sous menu 2.1 ... ) à changer par les forums disponibles dans chacune des catégories - Vous remarquerez que le menu 1 n'a pas de sous-menus et est un lien. c'est en fait un lien que vous pouvez utiliser comme redirection vers votre règlement par exemple. - Vous pouvez dupliquer les blocs commençant par autant de fois que vous avez de catégories, avant la balise - Vous pouvez dupliquer les blocs de sous menus encadrés par et autant de fois que vous avez de forums, avant la balise
Si vous avez des question ou un souci, n'hésitez pas à poster Ici | |
|