C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Slideshow horizontal infini
Hier à 08:26 par Leiris

» Infobulle avec effets CSS3
Hier à 01:35 par Helena-Bella

» Limitation de la signature
Ven 18 Aoû 2017, 23:36 par Helena-Bella

» Effet de volet glissant sur un bloc
Ven 18 Aoû 2017, 18:56 par Blocku

» Dimensions des avatars
Ven 18 Aoû 2017, 06:12 par Mortuus

» Signature codée
Jeu 17 Aoû 2017, 22:31 par Helena-Bella

» Signature codée
Jeu 17 Aoû 2017, 22:27 par Helena-Bella

» Signature codée avec onglets
Jeu 17 Aoû 2017, 22:18 par Helena-Bella


Partagez | 
 

Menu Horizontal et Déroulant

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://www.ryotopub.com
avatar
{ Membre hyper-actif }
{ Membre hyper-actif }

Masculin 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/2010

Coucou 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 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) !
MessageSujet: Menu Horizontal et Déroulant   Lun 19 Juil 2010, 11:43
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5575



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


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: Menu Horizontal et Déroulant   Ven 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

-
» Menu Horizontal et Déroulant
» Menu Horizontal
» Juste changer la couleur de la police du menu horizontal
» Aller directement vers un lien du menu déroulant
» Créer un menu horizontal en accordéon

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 | Contact | Signaler un abus | Forum gratuit