menu css avec des sous menus

Version imprimable

21/12/2008, 21h15
souaddemaroc

menu css avec des sous menus

Salut
J'ai un menu horizental avec des liens dans ce menu je veux ajoutés des sous menus et je sais pas quoi faire
Merçi d'avance pour votre aide
21/12/2008, 21h38
12monkeys

Bonsoir

Tu peut déjà une fois regarder sur la galerie css : http://css.developpez.com/galerie/ si tu y trouve ton bonheur... sinon t'en inspirer...

et bain je sais pas quoi faire ça marche pas avec moi et j'ai déjè vu le galerie maintenant voici mon code :

dans la partie head j'ai :

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
<style type="text/css">
<!--
    body {
        margin:0;
        padding:0;
        font: bold 15px/1.5em Verdana;
        align=center;
}
 
h2 {
        font: bold 16px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
 
}
 
img {
border: none;
}
 
    #tabs1 {
      float:left;
      width:100%;
      background:#F4F7FB;
      font-size:93%;
      line-height:normal;
      border-bottom:1px solid #BCD2E6;
      }
    #tabs1 ul {
          margin:0;
          padding: 0px 10px 0 90px;
          list-style:none;
      }
    #tabs1 li {
      display:inline;
      margin:0;
      padding:0;
      }
 
      #tabs1.sousMenu
		{
		 list-style-type: none;
		 margin: 0;
		 padding: 0;
		 border: 0;
		}
		#tabs1.sousMenu li
		{
		 float: none;
		 margin: 0;
		 padding: 0;
		 border: 0;
		}
 
    #tabs1 a {
      float:left;
      background:url('images/tableft1.gif') no-repeat left top;
      margin:0;
      text-decoration:none; padding-left:4px; padding-right:0; padding-top:0; padding-bottom:0
      }
    #tabs1 a span {
      float:left;
      display:block;
      background:url('images/tabright1.gif') no-repeat right top;
      color:#627EB7; padding-left:6px; padding-right:15px; padding-top:5px; padding-bottom:4px
      }
      #tabs1 a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#627EB7;
      }
    #tabs1 a:hover {
      background-position:0% -42px;
      }
    #tabs1 a:hover span {
      background-position:100% -42px;
      }
 
      #tabs1 #current a {
              background-position:0% -42px;
      }
      #tabs1 #current a span {
              background-position:100% -42px;
      }
-->
 </style>

dans la partie body :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
     <div id="tabs1" align="center">
            <ul>
                <li id="current"><a href="#"><span>partie 1<span></a></li>
                 <li><a href="#"><span>partie 2</span></a></li>
                 <li><a href="#"><span>partie 3</span></a></li>
                 <li><a href="#"><span>partie 4</span></a></li>
                  <li><a href="#"><span>partie 5</span></a></li>
                  <li><a href="#"><span>partie 5 avec sous menu</span></a>
                       <ul>
                       <li ><a href=#>niveau 1</a>  </li>                   
                      <li > <a href=#>niveau 2</a></li>
                       </ul>
                       </li>
                 </ul>
             </div>

21/12/2008, 23h16
Deallyra

Les sous menus ne devraient-ils pas être dans une div séparée?

enfin une sous div
22/12/2008, 12h32
souaddemaroc

je vois pas que j'ai plus d'un div dans le code
22/12/2008, 12h41
Deallyra

Justement, il t'en faut plusieurs
22/12/2008, 13h54
devyan

Citation:

Envoyé par Deallyra

Les sous menus ne devraient-ils pas être dans une div séparée?

enfin une sous div

Salut,

Pas obligatoirement, le UL du sous menu peut servir pour le masquage/affichage du sous-menu

@ souaddemaroc :

Il manque 'class="sousMenu"' dans UL : <ul class="sousMenu"> ...

Sans cette déclaration les clauses CSS liées à tout le contenu du sous-menu ne peuvent être prises en compte.
22/12/2008, 14h03
souaddemaroc

voila je sais pas ou je peux ajoutés les div si tu pourra m'indique ou bien me mentionner le placement dans mon code je serais ravissante
22/12/2008, 17h39
12monkeys

Bonsoir

Ca ne m'est pas revenu tout de suite, mais il y a un tutoriel sur ce sujet qui t'expliquera étape par étape comment faire : http://css.developpez.com/tutoriels/menu-deroulant/.

Bonne lecture...
22/12/2008, 20h31
souaddemaroc

Salut 12monkeys j'ai déjà vu le tutoriel que tu m'as proposé et j'ai pas pu arriver a completer le mien si tu pourra m'indique mon probleme sur le code
et j'ai essayer devyan ce que tu m'a dit pouratnt ca marche pas

Salut
Je voulais vous montrer mon nouveau code après avoir consulter le tutoriel proposé par 12monkeys mais pourtant ça marche pas
j'ai dans la partie head

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
71
72
73
74
75
76
77
78
79
80
81
               <style type="text/css">
<!--
    body {
        margin:0;
        padding:0;
        font: bold 15px/1.5em Verdana;
        align=center;
}
 
h2 {
        font: bold 16px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
 
}
 
img {
border: none;
}
 
    #tabs1 {
     width:1000px;
      background:#F4F7FB;
      font-size:93%;
      line-height:normal;
      border-bottom:1px solid #BCD2E6;
      margin:0;
      padding: 0px 10px 0 90px;
      list-style:none; 
       }
     #tabs1 li {
      float:left;
      margin:0;
      padding:0;
      }
      #tabs1 .sousmenu
		{
		   	 background:#F4F7FB;
     		 line-height:normal;
     		 border-bottom:1px solid #BCD2E6;
		}
#tabs1 .sousmenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0px none;
}
    #tabs1 a {
      float:left;
      background:url('images/tableft1.gif') no-repeat left top;
      margin:0;
      text-decoration:none; padding-left:4px; padding-right:0; padding-top:0; padding-bottom:0
      }
    #tabs1 a span {
      float:left;
      display:block;
      background:url('images/tabright1.gif') no-repeat right top;
      color:#627EB7; padding-left:6px; padding-right:15px; padding-top:5px; padding-bottom:4px
      }
      #tabs1 a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#627EB7;
      }
    #tabs1 a:hover {
      background-position:0% -42px;
      }
    #tabs1 a:hover span {
      background-position:100% -42px;
      }
 
      #tabs1 #current a {
              background-position:0% -42px;
      }
      #tabs1 #current a span {
              background-position:100% -42px;
      }
-->
                </style>

dans la parti body

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<ul id="tabs1">
   <li id="current"><><a href="#"><span>partie1</span></a></li>
   <li><a href="#"><span>partie2</span></a></li>
   <li><a href="#"><span>partie3</span></a></li>
   <li><a href="#"><span>partie4</span></a></li>
   <li><a href="#"><span>partie5 avec sous menu</span></a>
        <ul class="sousmenu">
             <li><a href ="#"><span>1</span></a></li>
             <li><a href="#"><span>2</span></a></li>
        </ul>
  </li>
</ul>

23/12/2008, 17h07
devyan

Salut,

Citation:

Envoyé par souaddemaroc

... pourtant ça marche pas ...

:aie: Et qu'est-ce qui ne marche pas exactement ?

Tu attends quel comportement ?
Tu obtiens quel comportement ?

Et au passage, tu testes avec quel(s) navigateur(s) ?

Aidez-nous à vous aider... :merci:
23/12/2008, 17h15
souaddemaroc

Bon mon problème c'est que les sous menus n'apparaissent pas lors du passage du souris et je travail avec l 'IE6
23/12/2008, 17h31
devyan

Citation:

Envoyé par souaddemaroc

Bon mon problème c'est que les sous menus n'apparaissent pas lors du passage du souris et je travail avec l 'IE6

Heu... Tu veux dire qu'avec le code fourni les sous-menus ne sont pas visibless ?

Bonsoir

Ce code fonctionne parfaitement sur FF3 et IE 7 :

Code:

1
2
3
4
5
6
ul#tabs1 { list-style-type:none; }
ul#tabs1 li { float:left;width:100px; }
 
ul.sousmenu { list-style-type:none;display:none; }
ul#tabs1 .sousmenu { display:none; }
ul#tabs1 li:hover .sousmenu { display:inline; }

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
<!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" />
<link href="../CSS/monStyle.css" rel="stylesheet" />
<title>MaPage</title>
</head>
 
<body>
 
<ul id="tabs1">
   <li id="current"><a href="#"><span>partie1</span></a></li>
   <li><a href="#"><span>partie2</span></a></li>
   <li><a href="#"><span>partie3</span></a></li>
   <li><a href="#"><span>partie4</span></a></li>
   <li><a href="#"><span>partie5 avec sous menu</span></a>
        <ul class="sousmenu">
             <li><a href ="#"><span>1</span></a></li>
             <li><a href="#"><span>2</span></a></li>
        </ul>
  </li>
</ul>
 
 
</body>
</html>

Cependant je doute que ce code fonctionne sur IE6 parce que ce dernier ne gère le hover que sur la balise a... mais je ne peut pas le tester n'ayant pas IE6 sous la main actuellement...

23/12/2008, 20h43
souaddemaroc

Salut
Mauvaise nouvelle ce code ne marche pas dans l'IE6 je l'ai testé et ça ne donne pas ayez vous une idée pour le faire fonctionnez sous le ie6
23/12/2008, 20h46
12monkeys

Citation:

Envoyé par 12monkeys

Cependant je doute que ce code fonctionne sur IE6 parce que ce dernier ne gère le hover que sur la balise a... mais je ne peut pas le tester n'ayant pas IE6 sous la main actuellement...

Il faut tout lire, je te l'avais signalé ;) Mais maintenant tu sais dans quelle direction chercher...
23/12/2008, 20h59
souaddemaroc

Bon que devrai je faire maintenant tester l'hover avec la baslise a ou quoi exactement