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
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
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 :
dans la partie body :
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>
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>
Les sous menus ne devraient-ils pas être dans une div séparée?
enfin une sous div
je vois pas que j'ai plus d'un div dans le code
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.
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
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...
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
dans la parti body
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>
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>
Bon mon problème c'est que les sous menus n'apparaissent pas lors du passage du souris et je travail avec l 'IE6
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...
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
Bon que devrai je faire maintenant tester l'hover avec la baslise a ou quoi exactement
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager