Discussion :

[hysteri-k]

Bonjour à tous !

Je me suis lancé dans la création d'un site et en ce moment je travaille sur le menu de navigation.

Petite originalité, je souhaite utiliser des images pour chacun des éléments du menu au lieu de texte. De plus l'une des catégories contient des sous catégories qui sont elles aussi des images.

N'étant pas sûr d'être très clair voici mon code afin d'illustrer mon propos :

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="nav">
  <ul> 
    <li><a href="#"><img src="img/icone1.png" width="50" height="50" /></li></a>
    <li><a href="#"><img src="img/icone2.png" width="50" height="50" /></li></a>
    <li><a href="#"><img src="img/icone3.png" width="50" height="50" /></li></a>
  <ul>
    <li><a href="#"><img src="img/icone3-1.png" width="50" height="50" /></li></a>
    <li><a href="#"><img src="img/icone3-2.png" width="50" height="50" /></li></a>
    <li><a href="#"><img src="img/icone3-3.png" width="50" height="50" /></li></a>
    <li><a href="#"><img src="img/icone3-4.png" width="50" height="50" /></li></a>
  </ul>
    <li><a href="#"><img src="img/icone4.png" width="50" height="50" /></li></a>
    <li><a href="#"><img src="img/icone5.png" width="50" height="50" /></li></a>
  </ul>
  <br/><hr>
</div>

Je cherche maintenant à mettre ça en page avec du CSS. J'ai cherché sur plusieurs site, tutos, j'ai testé plusieurs choses mais ça n'a jamais fonctionné comme je le souhaite.

J'aimerais aligner le menu à l'horizontal (pas de problème pour ça ) puis que les images du sous menu (icone3-1, icone3-2, icone3-3, icone3-4) se cachent sous l'image du menu (icone3) et quelles apparaissent à la verticale sous l'icone 3 lorsque je passe la souris sur celle-ci.

Quelqu'un pourrait-il me donner un coup de main au niveau du CSS ?

Merci d'avance pour vos réponses et votre aide !

[hysteri-k]

J'ai un peu avancé dans mes test et j'ai testé ceci qui s'approche un peu de ce que je veux faire :

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
#nav ul {
    padding: 0 20px;
    list-style: none;
    position: relative;
    display: inline-table;
}
 
#nav ul li {
    float: left;
}
 
 
#nav ul li a {
    padding: 0px 60px;
}
 
#nav ul ul {
    padding: 0;
    position: absolute; top: 100%;
    display:none;
}
 
#nav ul ul li {
    float: none;
    position: relative;
}
 
#nav ul ul ul {
    position: absolute; left: 100%; top:0;
}
 
#nav ul:hover ul
{
    display:block;
}

Le problème c'est que le sous menu apparait lors du survol de n'importe quelle icône et pas seulement l'icone3. De plus le menu apparait en dessous de icone1.

[Muchos]

1. Utiliser des images n'est peut-être pas une bonne idée (lourdeur, accessibilité...).
2. Voici comment on fait des menus déroulants.

[Bovino]

Ton code HTML est mauvais.
Les balises se chevauchent :

Code html :

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

<li><a href="#"><img src="img/icone1.png" width="50" height="50" /></li></a>

Tes sous listes ne sont pas dans un élément de la liste principale.
Tant que le HTML ne sera pas correct, tu n'arriveras à rien !

[Invité]

Bonjour,

Code :

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

    <li><a href="#"><img src="img/icone1.png" width="50" height="50" /></li></a>

Code :

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

    <li><a href="#"><img src="img/icone1.png" width="50" height="50" /></a></li>

Tant qu'à utiliser des images :

• mettre une image transparente dans chaque <li>
• mettre des attributs alt="..." et title="..." à chaque <img .../>
• ajouter une class spécifique à chaque <li>
• créer un sprite regroupant toutes les images + mettre les images en background

Grâce au sprite, on n'a plus que 2 images à charger (le sprite et l'image transparente).

Ce qui donne :

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
<div id="nav">
	<ul> 
		<li class="icone1"><a href="#"><img src="img/transparent.png" alt="xxx1" title="menu 1"/></a></li>
		<li class="icone2"><a href="#"><img src="img/transparent.png" alt="xxx2" title="menu 2" /></a></li>
		<li class="icone3"><a href="#"><img src="img/transparent.png" alt="xxx3" title="menu 3" /></a>
			<ul>
				<li class="icone3-1"><a href="#"><img src="img/transparent.png" alt="xxx3-1" title="sous-menu 3-1" /></a></li>
				<li class="icone3-2"><a href="#"><img src="img/transparent.png" alt="xxx3-2" title="sous-menu 3-2" /></a></li>
				<li class="icone3-3"><a href="#"><img src="img/transparent.png" alt="xxx3-3" title="sous-menu 3-3" /></a></li>
				<li class="icone3-4"><a href="#"><img src="img/transparent.png" alt="xxx3-4" title="sous-menu 3-4" /></a></li>
			</ul>
		</li>
		<li class="icone4"><a href="#"><img src="img/transparent.png" alt="xxx4" title="menu 4" /></a></li>
		<li class="icone5"><a href="#"><img src="img/transparent.png" alt="xxx5" title="menu 5" /></a></li>
	</ul>
<br/>
<hr/>
</div>

N.B. Noter l'indentation du code (tabulations) pour une lecture/débogage facile.

Et dans le CSS :

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
#nav li, #nav li img { width:50px; height:50px; }
/* images en background */
#nav li.icone1 { background:url('./img/sprite-icones.png') 0px 0px no-repeat; }
#nav li.icone2 { background:url('./img/sprite-icones.png') 0px 50px no-repeat; }
#nav li.icone3 { background:url('./img/sprite-icones.png') 0px 100px no-repeat; }
#nav li.icone4 { background:url('./img/sprite-icones.png') 0px 150px no-repeat; }
#nav li.icone5 { background:url('./img/sprite-icones.png') 0px 200px no-repeat; }
/* sous-menu */
#nav li.icone3-1 { background:url('./img/sprite-icones.png') 50px 0px no-repeat; }
#nav li.icone3-2 { background:url('./img/sprite-icones.png') 50px 50px no-repeat; }
#nav li.icone3-3 { background:url('./img/sprite-icones.png') 50px 100px no-repeat; }