Barre de menu et sous-menu déroulant

**Ginko** · 15/06/2008, 16h35

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

mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**htr999** · 15/06/2008, 22h26

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

"css menu déroulant"

ou bien

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

sur GOOGOAL et tu trouveras des pistes...

**rohim55** · 20/06/2008, 17h00

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**cedricbaudry.com** · 21/06/2008, 22h12

pas besoin de javscript...

pour tes sous menus, dans ton css tu mets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.sousmenu {
display: none;
}

ainsi tes sous menus n'apparaitront pas..

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et ils apparaitront quand tu passera ta souris dessus

**Ginko** · 22/06/2008, 10h55

bonjour et merci pour vos réponses

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

**cedricbaudry.com** · 23/06/2008, 09h18

voici le code du menu de mon site

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Ginko** · 28/06/2008, 21h22

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

**Bovino** · 29/06/2008, 11h48

Envoyé par cedricbaudry.com

pas besoin de javscript...

pour tes sous menus, dans ton css tu mets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.sousmenu {
display: none;
}

ainsi tes sous menus n'apparaitront pas..

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**htr999** · 03/07/2008, 23h14

.sousmenu:hover

**Bovino** · 04/07/2008, 07h08

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

Barre de menu et sous-menu déroulant

HTML

Discussions similaires

Partager

Partager