Menu Horizontal et Déroulant Bouton_activeMenu Horizontal et Déroulant Bouton_hoverMenu Horizontal et Déroulant Fb-hoverMenu Horizontal et Déroulant Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Menu Horizontal et Déroulant EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Menu Horizontal et Déroulant EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Menu Horizontal et Déroulant EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Menu Horizontal et Déroulant EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Menu Horizontal et Déroulant EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Menu Horizontal et Déroulant EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Menu Horizontal et Déroulant EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Menu Horizontal et Déroulant EmptySam 11 Fév 2023, 06:04 par Krager

-48%
Le deal à ne pas rater :
Philips Hue Pack Decouverte 2024 : lightstrip 3M + ampoules E27 X2 + ...
119 € 229 €
Voir le deal

Partagez
 

Menu Horizontal et Déroulant

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://www.ryotopub.com
Haribot' ♪
Haribot' ♪
{ Membre hyper-actif }
{ Membre hyper-actif }

Masculin Messages : 5163



Menu Horizontal et Déroulant Empty
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/2010

Coucou les Gens! Menu Horizontal et Déroulant 926145

Donc nous allons apprendre à réaliser ceci : Clik!
Ne vous inquiétez pas, ce n'est pas du tout compliqué
32,,! Menu Horizontal et Déroulant 512254

Tout d'abord, prenez une page HTML dans les Modules du Panneau d'Administration Wink

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) ! Menu Horizontal et Déroulant 510527
MessageSujet: Menu Horizontal et Déroulant   Menu Horizontal et Déroulant EmptyLun 19 Juil 2010, 11:43
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



Menu Horizontal et Déroulant Empty
FAQ



Q
Est-il possible de faire en sorte que le menu se déroule au clic ?

R
Remplace les "OnMouseOver" par "OnClick"


Q
J'aimerais mettre ce menu dans un message sur le forum, où dois-je alors placer les codes?

R
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
MessageSujet: Re: Menu Horizontal et Déroulant   Menu Horizontal et Déroulant EmptyVen 09 Déc 2011, 17:20
Revenir en haut Aller en bas
 

Menu Horizontal et Déroulant

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Faire un menu horizontal déroulant (messages)
» Menu horizontal
» Menu Horizontal
» Menu horizontal (messages)
» Menu déroulant

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Mise en oeuvre-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit