Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Pour toute question concernant ce tutoriel, ouvrez un sujet avec votre question et un lien vers le présent tutoriel dans la section suivante, merci : Aide CSS&HTML Faire un Menu Horizontal Déroulant Niveau: Intermédiaire | Par: Hαrιcoow | Validé par: Hαrιcoow | En date du : 19/07/2010Coucou les Gens! Donc nous allons apprendre à réaliser ceci : Clik! Ne vous inquiétez pas, ce n'est pas du tout compliqué 32,,! Tout d'abord, prenez une page HTML dans les Modules du Panneau d'Administration Commencez par insérer ceci : - 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> Ce script est le script qui va servir pour dérouler les menus. Passons, désormais au CSS. - Code:
-
<style type="text/css" media="screen"> <!-- body { margin: 0; padding: 0; background: white; font: 80% "Comic Sans MS", cursive; } dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #navigation dl { float: left; width: 12em; } #navigation dt { cursor: pointer; text-align: center; font-weight: bold; background: #ffffff; border: 1px solid gray; margin: 1px; } #navigation dd { display: none; border: 1px solid black; } #navigation li { text-align: center; background: #fff; } #navigation li a, #menu dt a { color: #000; text-decoration: none; display: block; border: 0 none; } #navigation li a:hover, #navigation li a:focus, #navigation dt a:hover, #navigation dt a:focus { background: #000000; color:#FFF; } #site { position: absolute; z-index: 1; top : 70px; left : 10px; color: #000; background-color: #ddd; padding: 5px; border: 1px solid gray; } --> </style> Ensuite, il faut créer le menu de navigation. Voici un code par exemple que je viens de faire avec Dreamweaver : - Code:
-
<div id="navigation">
<dl> <dt onmouseover="javascript:montre('smenu1');">Règlement</dt> <dd id="smenu1"> <ul> <li><a href="">Lalalilalilala</a></li>
</ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu2');">Contexte</dt> <dd id="smenu2"> <ul> <li><a href="">Lalalilalilala</a></li>
</ul> </dd>
</dl>
<dl> <dt onmouseover="javascript:montre('smenu3');">Présentations</dt> <dd id="smenu3"> <ul> <li><a href="">Lalalilalilala</a></li> </ul> </dd> </dl>
<dl> <dt onmouseover="javascript:montre('smenu4');">Copyright</dt> <dd id="smenu4"> <ul> <li><a href="">Menu © Haricoow pour CSSActif</a></li> </ul> </dd> </dl> </div> Et pour un code complet : - Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Menu Horizontal Déroulant</title>
<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% "Comic Sans MS", cursive; } dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #navigation dl { float: left; width: 12em; } #navigation dt { cursor: pointer; text-align: center; font-weight: bold; background: #ffffff; border: 1px solid gray; margin: 1px; } #navigation dd { display: none; border: 1px solid black; } #navigation li { text-align: center; background: #fff; } #navigation li a, #menu dt a { color: #000; text-decoration: none; display: block; height: 10%; border: 0 none; } #navigation li a:hover, #navigation li a:focus, #navigation dt a:hover, #navigation dt a:focus { background: #000000; color:#FFF; } #site { position: absolute; z-index: 1; top : 70px; left : 10px; color: #000; background-color: #ddd; padding: 5px; border: 1px solid gray; } --> </style>
</head>
<body> <div id="navigation">
<dl> <dt onmouseover="javascript:montre('smenu1');">Règlement</dt> <dd id="smenu1"> <ul> <li><a href="">Lalalilalilala</a></li>
</ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu2');">Contexte</dt> <dd id="smenu2"> <ul> <li><a href="">Lalalilalilala</a></li>
</ul> </dd>
</dl>
<dl> <dt onmouseover="javascript:montre('smenu3');">Présentations</dt> <dd id="smenu3"> <ul> <li><a href="">Lalalilalilala</a></li> </ul> </dd> </dl>
<dl> <dt onmouseover="javascript:montre('smenu4');">Copyright</dt> <dd id="smenu4"> <ul> <li><a href="">Menu © Haricoow pour CSSActif</a></li> </ul> </dd> </dl>
</div> </body> </html>
A vos questions (dans la section Aide CSS & xHTML) ! | | |
|
Kaiji
Blanche-Neige
Messages : 5578
| FAQ Est-il possible de faire en sorte que le menu se déroule au clic ? Remplace les "OnMouseOver" par "OnClick" J'aimerais mettre ce menu dans un message sur le forum, où dois-je alors placer les codes? Il faut que tu fasses le code sur une Page HTML et ensuite, tu la place en Iframe. Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici : http://www.css-actif.com/f17-aide-css-xhtml | | |
|