menu css avec des sous menus

**souaddemaroc** · 21/12/2008, 21h15

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

**12monkeys** · 21/12/2008, 21h38

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...

**souaddemaroc** · 21/12/2008, 22h36

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 :

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
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 html :

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
 
     <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>

**Deallyra** · 21/12/2008, 23h16

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

enfin une sous div

**souaddemaroc** · 22/12/2008, 12h32

je vois pas que j'ai plus d'un div dans le code

**Deallyra** · 22/12/2008, 12h41

Justement, il t'en faut plusieurs

**devyan** · 22/12/2008, 13h54

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.

**souaddemaroc** · 22/12/2008, 14h03

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

**12monkeys** · 22/12/2008, 17h39

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...

**souaddemaroc** · 22/12/2008, 20h31

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

**souaddemaroc** · 23/12/2008, 16h40

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 :

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
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 html :

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

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>

**devyan** · 23/12/2008, 17h07

Salut,

Envoyé par souaddemaroc

... pourtant ça marche pas ...

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...

**souaddemaroc** · 23/12/2008, 17h15

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

**devyan** · 23/12/2008, 17h31

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 ?

**12monkeys** · 23/12/2008, 18h39

Bonsoir

Ce code fonctionne parfaitement sur FF3 et IE 7 :

Code :

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

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 html :

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
<!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...

**souaddemaroc** · 23/12/2008, 20h43

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

**12monkeys** · 23/12/2008, 20h46

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...

**souaddemaroc** · 23/12/2008, 20h59

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

menu css avec des sous menus

CSS

Discussions similaires

Partager

Partager