Menu déroulant avec images

**solorac** · 19/09/2016, 19h32

Bonjour la Communauté,

Je reviens à la créa de page, je me suis arrêté quelques années et mes notions en CSS sont quelques peu "éculées".
Je voudrais crée un menu déroulant avec des sous-menus bien évidemment mais je galère grave.
Je recherche donc les bases indispensables pour mettre en place ce menu déroulant.
J'ai créé mes boutons image avec Toshop, ils dont 145x39 px. Ma page fait 879px.

J'ai quelques souvenirs pour margin, padding, ul, li... mais cela ne va pas bien loin.

J'ai trouvé quelques nouvelles notions en css3 qui sont bien sympa comme les transitions, mais j'ai besoin de votre aide pour mettre mes images alignées :

- dois-je me servir de float?

- Display ?

Etc...

Un bon tuto serait le bienvenue.

Je vous remercie.

**solorac** · 20/09/2016, 12h30

Re,

Je n'ai pas eu beaucoup d'aide donc j'ai repris mes recherches et je me suis inspiré de plusieurs sources.

J'aimerai amélioré ce que je viens de faire de la façon suivante :

J'ai créé une image pour le fond de chaque menu et sous-menu mais leur taille est dictée par la longueur des caractères. Comme faire prendre le dessous à l'image. Elle fait 145 par 39 pixels?

Merci

Voici mon code css :

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
#menu2, #menu2 ul{
padding:0;
margin-top:5px;
list-style:none;
text-align:center;
}
#menu2 li{
display:inline-block;
position:relative;
background:url(../images/visiteurs/b1.png);
}
#menu2 ul li{
display:inherit;
}
#menu2 ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
transition: .8s all .3s;
}
#menu2 li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu2 li:first-child{
background:url(../images/visiteurs/b1.png);
}
#menu2 li:nth-child(2){
background:url(../images/visiteurs/b1.png);
}
#menu2 li:nth-child(3){
background:url(../images/visiteurs/b1.png);
}
#menu2 li:nth-child(4){
background:url(../images/visiteurs/b1.png);
}
#menu2 li:nth-child(5){
background:url(../images/visiteurs/b1.png);
}
#menu2 li:last-child{
background:url(../images/visiteurs/b1.png);
}
 
 background des liens menus et sous menus au survol */
#menu2 li:first-child:hover, #menu2 li:first-child li:hover{
background:url(../images/visiteurs/b2.png);
}
#menu2 li:nth-child(2):hover, #menu2 li:nth-child(2) li:hover{
background:url(../images/visiteurs/b2.png);
}
#menu2 li:nth-child(3):hover, #menu2 li:nth-child(3) li:hover{
background:url(../images/visiteurs/b2.png);
}
#menu2 li:nth-child(4):hover, #menu2 li:nth-child(4) li:hover{
background:url(../images/visiteurs/b2.png);
}
#menu2 li:nth-child(5):hover, #menu2 li:nth-child(5) li:hover{
background:url(../images/visiteurs/b2.png);
}
#menu2 li:last-child:hover, #menu2 li:last-child li:hover{
background:url(../images/visiteurs/b2.png);
}
/* les a href */
#menu2 a{
text-decoration:none;
display:block;
padding:8px;
color:#000;
font-family:arial;
}
#menu2 ul a{
padding:8px 0;
}
#menu2 li:hover li a{
color:#000;
text-transform:inherit;
}
#menu2 li:hover a, #menu2 li li:hover a{
color:#000;
}

**miss_socrates** · 24/09/2016, 17h51

Si je comprends bien, chaque menu et sous-menu a une image de fond ? Et y a-t-il du texte ?
Il faut créer le menu avec des listes à puces puis y placer les images en arrière-fond.
Les transitions donneront un aspect plus "coulé" , moins saccadé au déroulant.

Invité · 25/09/2016, 15h54

Bonjour,

en effet, de l'eau à coulé sous les ponts....

1/ un code CSS sans son HTML associé n'a pas grand intérêt

De plus, une image de ce que tu souhaites obtenir nous aiderait aussi (nous n'avons pas accès à tes images)

2/ pourquoi utiliser :nth-child,... si l'image de fond est la même pour tous

3/ tu fixes les dimensions. OK pour un écran de 1024px minimum.
Mais que fais-tu pour les autres medias (tablettes, smartphones ?)

**solorac** · 29/09/2016, 12h03

Bonjour,

Et merci à tous les deux pour votre aide.

J'ai un petit peu avancé dans mes recherches. Dèjà, je n'ai plus le problème de longueur de texte car j'ai "fixé" la dim des boutons. Alors, c'est vrai que je vais avoir le pb pour les tablettes et les smartphones. Alors si tu as une solution qui ne m'oblige pas à modifier beaucoup de code, je suis preneur.

Mais j'ai d'autres soucis :

Je voudrais que lorsque je suis dans une page atteinte par un bouton du sous-menu, ce dernier soit identifié. Alors soit par une couleur différente, soit par une puce... Qu'en pensez-vous ?

Donc voici mon code html :

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
<ul id="menu2">
	<li><a href="#">Accueil</a>
 
	</li>
    <li><a href="#">Présentation</a>
		<ul>
			<li><a href="#">Qui sommes nous ?</a></li>
			<li><a href="#">iDr</a></li>
			<li><a href="#">Notre réseau</a></li>
		</ul>
	</li>
	<li><a href="#">Services</a>
		<ul>
			<li><a href="#">Nos plateformes</a></li>
			<li><a href="#">Nos partenaires</a></li>
		</ul>
	</li>
	<li><a href="#">MDD</a>
		<ul>
			<li><a href="#">Marque1</a></li>
			<li><a href="#">Marque2</a></li>
			<li><a href="#">Marque3</a></li>
		</ul>
	</li>
 
    <li><a href="#">&nbsp;</a>
		<ul>
			<li><a href="#">Le concept novateur</a></li>
			<li><a href="#">Service et qualité</a></li>
		</ul>
	</li>
 
    <li><a href="#">Contact</a>
 
	</li>
 
</ul>

Le code css :

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
89
90
#menu2, #menu2 ul{
padding:0;
margin-top:3px;
list-style:none;
text-align:center;
}
 
#menu2 li{
display:inline-block;
position:relative;
width:143px;
height:39px;
line-height:39px;
}
 
#menu2 ul li{
display:inherit;
}
 
#menu2 ul{
position:absolute;
max-height:0px;
overflow:hidden;
transition: 1.6s;
}
 
#menu2 li:hover ul{
max-height:156px;
 
}
 
/* background des liens menus */
#menu2 li:first-child{
background:url(../images/visiteurs/b5.png);
margin-top:-3px;
}
#menu2 li:nth-child(2){
background:url(../images/visiteurs/b5.png);
}
#menu2 li:nth-child(3){
background:url(../images/visiteurs/b5.png);
}
#menu2 li:nth-child(4){
background:url(../images/visiteurs/b5.png);
}
#menu2 li:nth-child(5){
background:url(../images/visiteurs/b5n.png);
}
#menu2 li:last-child{
background:url(../images/visiteurs/b5.png);
}
 
 /*background des liens menus et sous menus au survol */
#menu2 li:first-child:hover, #menu2 li:first-child li:hover{
background:url(../images/visiteurs/b6.png);
}
#menu2 li:nth-child(2):hover, #menu2 li:nth-child(2) li:hover{
background:url(../images/visiteurs/b6.png);
}
#menu2 li:nth-child(3):hover, #menu2 li:nth-child(3) li:hover{
background:url(../images/visiteurs/b6.png);
}
#menu2 li:nth-child(4):hover, #menu2 li:nth-child(4) li:hover{
background:url(../images/visiteurs/b6.png);
}
#menu2 li:nth-child(5):hover {
background:url(../images/visiteurs/b6n.png);
}
#menu2 li:last-child:hover, #menu2 li:last-child li:hover{
background:url(../images/visiteurs/b6.png);
}
 
 
/* les a href */
#menu2 a{
text-decoration:none;
display:block;
color:#000;
font-family:arial;
 
}
 
#menu2 li:hover li a{
color:#000;
text-transform:inherit;
margin-top:3px;
}
#menu2 li:hover a, #menu2 li li:hover a{
color:#000;
}

Mon 2ème problème vient de mon texte que je n'arrive pas arrêté à environ 3 pixlels de la fin de mon image.

Voici le html

Code :

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

1
2
3
<div id="gauche">Contrairement à une opinion répandue, le Lorem Ipsum n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots latins les plus obscurs, consectetur, extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la littérature classique, découvrit la source incontestable du Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant la Renaissance, est un traité sur la théorie de l'éthique. Les premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit amet...", proviennent de la section 1.10.32.
 
</div>

Le css :

Code :

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

1
2
3
4
5
6
7
8
9
10
/* Annonce Gauche */
#gauche{
float:left;
margin-top:100px;
font-size:12px;
background:url(../images/visiteurs/b4.png) no-repeat;
padding-top:35px;
padding-right:3px;
width:280px;
}

Et je vous joins mon image.

Encore merci pour votre aide.

Invité · 29/09/2016, 12h34

Bonjour,

1/ menu
Mettre une class "active" sur le <li> de la page en cours.
-> Faire une recherche

(ce n'est pas ce qui manque)

2/ pour ton 2ème problème, l'image n'a, à priori, RIEN à faire en background !
Elle doit être dans une balise <img ... />

Cela dit, ton "image" peut être avantageusement remplacée par des effets CSS (dégradé + ombrage).