Barre de menu et sous-menu déroulant

Version imprimable

Bonjour à tous,

J'ai intégré à ma page web une barre de menu avec des boutons, quand on clique sur un des boutons, il devrait y avoir un menu déroulant qui apparaisse.
Seulement, tout ce que j'ai réussi à faire, c'est d'afficher les sous menus, mais à la suite des autres boutons sur une même barre :roll:

mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="global">
	<div id="Banniere"></div>
	<div class="menu bubplastic horizontal orange">
   <ul>
      <li><span class="menu_r"><a href=""><span class="menu_ar"><b>Accueil</b></span></a></span></li>
      <li><span class="menu_r"><a href=""><span class="menu_ar"><b>test menu 1</b></span></a></span></li>
         <ul>
            <li><a href="Sous menu 2.1">Sous menu 2.1</a></li>
            <li><a href="Sous menu 2.2">Sous menu 2.2</a></li>
         </ul>
      </li>
      <li><span class="menu_r"><a href=""><span class="menu_ar"><b>test menu 2</b></span></a></span></li>
      <li><span class="menu_r"><a href=""><span class="menu_ar"><b>test menu 3</b></span></a></span></li>
         <ul>
            <li><a href="Sous menu 4.1">Sous menu 4.1</a>
               <ul>
                  <li><a href="Sous sous menu 4.1.1">Sous sous menu 4.1.1</a></li>
                  <li><a href="Sous sous menu 4.1.2">Sous sous menu 4.1.2</a></li>
                  <li><a href="Sous sous menu 4.1.3">Sous sous menu 4.1.3</a></li>
               </ul>
            </li>
            <li><a href="Sous menu 4.2">Sous menu 4.2</a></li>
         </ul>
      </li>
      <li><span class="menu_r"><a href=""><span class="menu_ar"><b>Contact</b></span></a></span></li>
   </ul>

si quelqu'un a déjà réaliser ce genre de code et qu'il veut bien m'aider, ça serait cool :yaisse2:

15/06/2008, 22h26
htr999

il manquerait des éléments de CSS et/ou JavaScript dans ton code pour que cela soit fonctionnel !!!
essaie

Citation:

"css menu déroulant"

ou bien

Citation:

"développez.com css menu déroulant"

sur GOOGOAL et tu trouveras des pistes...

Pour faire ce genre de menu il te faut en premier lieu utiliser du javascript pour gérer les changements d'états des div que tu veux cacher ou afficher.
Puis il faut que tu utilise quelques règles de styles. Je te donne un exemple.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function affiche(id) { document.getElementById(id).style.display='block'; //Change le style du div pour l'afficher } <html> ... <a href="#" onclick="affiche('essai')");>Lien</a> <div id="essai" style="display:none"> ... ... </div>

21/06/2008, 22h12
cedricbaudry.com
pas besoin de javscript...

pour tes sous menus, dans ton css tu mets
Code:

1 2 3 .sousmenu { display: none; }
ainsi tes sous menus n'apparaitront pas..
Code:

1 2 3 .sousmenu:hover { display: block; }
et ils apparaitront quand tu passera ta souris dessus :)

bonjour et merci pour vos réponses ;)

donc, j'ai ajouté ces codes dans mon css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
.sousmenu {
display: none;
}
.soussousmenu {
display: none;
}
.sousmenu:hover {
display: block;
}
.soussousmenu:hover {
display: block;
}

j'ai modifié mon html comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="global">
	<div id="Banniere"></div>
	<div id="menu">
	<div class="menu bubplastic horizontal orange">
   <ul>
      <li><span class="menu_r"><a href=""><span class="menu_ar"><b>MENU1</b></span></a></span></li>
      <li><span class="menu_r"><a href=""><span class="menu_ar"><b>MENU2</b></span></a></span></li>
         <ul>
            <li class="sousmenu"><a href="Sous menu 2.1">Sous menu 2.1</a></li>
            <li class="sousmenu"><a href="Sous menu 2.2">Sous menu 2.2</a></li>
         </ul>
      </li>
      <li><span class="menu_r"><a href=""><span class="menu_ar"><b>MENU3</b></span></a></span></li>
      <li><span class="menu_r"><a href=""><span class="menu_ar"><b>MENU4</b></span></a></span></li>
         <ul>
            <li class="sousmenu"><a href="Sous menu 4.1">Sous menu 4.1</a>
               <ul>
                  <li class="sousousmenu"><a href="Sous sous menu 4.1.1">Sous sous menu 4.1.1</a></li>
                  <li class="sousousmenu"><a href="Sous sous menu 4.1.2">Sous sous menu 4.1.2</a></li>
                  <li class="sousousmenu"><a href="Sous sous menu 4.1.3">Sous sous menu 4.1.3</a></li>
               </ul>
            </li>
            <li class="sousmenu"><a href="Sous menu 4.2">Sous menu 4.2</a></li>
         </ul>
      </li>
      <li><span class="menu_r"><a href=""><span class="menu_ar"><b>MENU5</b></span></a></span></li>
   </ul>
<br class="clearit" />
</div></div>

en ajoutant aux balises <li>, class="sousmenu", afin de les enrouler et les dérouler
alors, tout c'est bien enroulé mais ça ne se déroule pas, j'ai testé sur Firefox et IE6 :oops:

Je pense que le problème doit venir de la disposition de mes sous menus comme à la base, mes sous menus s'affichaient sur la même ligne que les menus, et pareil pour les sous sous menu

Cette nuit, j'ai tenté plusieurs choses, tenter une disposition différente, peut-être également que le problème viendrai de mes span class qui sont liés au css

je m'arrache les cheveux même si je n'en ai plus des masses :lol:

voici le code du menu de mon site

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<ul>
   <li>
	<a class="bouton" href="./index.php"><img src="./images/menu/menuAccueil.png" alt="Bouton Accueil" /><!--[if IE 7]><!--></a><!--<![endif]-->
   </li>
 
   <li>
	<a class="bouton" href="./"><img src="./images/menu/menuSociete.png" alt="Bouton Société" /><!--[if IE 7]><!--></a><!--<![endif]-->
   </li>
 
   <li>
	<a class="bouton" href="./"><img src="./images/menu/menuAutomates.png" alt="Bouton Automates" /><!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	    <li><a href="./" title="Ajout / Distribution / Dilution">Ajout / Distribution / Dilution</a></li>
	   <li><a href="./" title="Préparation pour Dosage du Glyphosate">Préparation pour Dosage du Glyphosate</a></li>
	   <li><a href="./" title="Mise à pH">Mise à pH</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
 
   <li>
   <a class="bouton" href="./"><img src="./images/menu/menuProteomique.png" alt="Bouton Protéomique" /><!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
	<li><a href="./proteoMaldiImaging.php" title="Préparation pour Maldi Imaging">Préparation pour Maldi Imaging</a></li>
	<li><a href="./" title="Préparation pour Seldi">Préparation pour Seldi</a></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
 
   <li>
      <a class="bouton" href="./"><img src="./images/menu/menuElectronique.png" alt="Bouton Electronique" /><!--[if IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul>
	   <li><a href="./" title="Dépôt de Couches Conductrices / Isolantes">Dépôt de Couches Conductrices / Isolantes</a></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
 
   <li>
      <a class="bouton" href="./"><img src="./images/menu/menuMicrofluidique.png" alt="Bouton Microfluidique" /><!--[if IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
           <li><a href="./" title="Ejection de Nanovolumes">Ejection de Nanovolumes</a></li>
	   <li><a href="./" title="Module de Contrôle de l\'Ejection">Module de Contrôle de l'Ejection</a></li>
	   <li><a href="./" title="Module de Contrôle de Débit">Module de Contrôle de Débit</a></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
 
  <li>
      <a class="bouton" href="./"><img src="./images/menu/menuContact.png" alt="Bouton Contact" /><!--[if IE 7]><!--></a><!--<![endif]-->
   </li>
</ul>

et le css associé..

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
/* remove the bullets, padding and margins from the lists */
.menu {
margin-left:38px
}
 
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}
 
/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
}
 
/* style all the links */
.menu ul ul a, .menu ul ul :visited {
display:block;
font-family: times new roman;
font-size: 11.5px;
width:220px;
padding:7px ;
color:#444444;
background:#71C3BC;
text-decoration:none;
margin-right:1px;
text-align:center;
font-weight: bold;
border: 0.5px dashed #ffffff;
}
/* style the links hover */
.menu ul ul :hover{
color:#71C3BC;
background:#ffffff;
border: 0.5px dashed #71C3BC;
}
 
/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:220px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
 
.menu .bouton{
display:block;
border: none;
background: #ffffff;
}
.menu .bouton img {
border: none;
height: 33px;
}

un bon exemple vaut mieux qu'un long discours :P

28/06/2008, 21h22
Ginko

merci de ta réponse, je suis quand même arrivé à faire quelque chose, mais pas très esthétique à mon goût (manques d'éléments et surtout, de connaissances ^^)

Je me suis rabattu sur un script en java, qui, je trouve, s'intègre plutôt bien à mon futur site :yaisse2:
29/06/2008, 11h48
Bovino
Citation:
Envoyé par cedricbaudry.com

pas besoin de javscript...

pour tes sous menus, dans ton css tu mets

Code:

1 2 3 .sousmenu { display: none; }

ainsi tes sous menus n'apparaitront pas..

Code:

1 2 3 .sousmenu:hover { display: block; }

et ils apparaitront quand tu passera ta souris dessus :)
Bien d'accord, en revanche, le seul souci est maintenant de savoir COMMENT tu passes dessus !
03/07/2008, 23h14
htr999

Citation:

.sousmenu:hover
04/07/2008, 07h08
Bovino

Oui... mais comment tu fais un hover sur un élément qui a le display à none ???