Un Menu déroulant avec des images

[°°° Zen-Spirit °°°]

Bonjour à vous.
Je souhaite attaquer mon menu déroulant.
Par contre, je souhaite avoir votre avis sur certains points.
1/ Je souhaite savoir si c'est mieux un MENU flash ou HTML / CSS ?
2/ Je voudrai savoir s'il existe des tutos pour faire un menu comme le site du zéro ( Comme l'onglet "Participez" par exemple ). C'est à dire insérer des images dans les sous menus par rubrique.
3/ Existe t'il des inconvénients à utiliser du Javascript ?
Merci de me conseiller et de m'aider.

[Gaetan_]

Oublie déjà Flash pour tes menus, les liens sont plus facilement indexables si ton menu est réalisé en CSS voir CSS / JS (JQuery).

Exemple CSS / JQuery :
http://www.sohtanaka.com/web-design/...-w-css-jquery/
accompagné d'un tutoriel

Exemple full CSS :
http://www.snoupix.com/demo/css3-meg...menu/demo.html

[firehist]

Bonjour!

Je vais essayer de te répondre:

1/ Pour ma part je te conseille de bannir le Flash. Un menu en HTML/CSS est faisable, tu peux également y rajouter du javascript (ou jQuery) pour animer le pâté!

2/

Google is your best friend

Google is your best friend

Rien ne t'empêche d'utiliser la méthode du Sideduzero, c'est à dire de construire ton menu simplement:

Code :

<ul><li>menu1</li><li>menu2</li></ul>

avec évidemment le style qui te convient.
Puis de capturer l'évènement onmouseover sur tes balises <li></li>, et au passage de la souris, afficher une balise <div> qui contiendras tous ce que tu veux: image, titres, etc.
En jQuery cela donnerai par exemple:

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
 
<script type="text/javascript">
	$().ready(function() {
		$("#menuBar li").hover(function() {
			// Quand la souris passe dessus
			var currentId = $(this).attr("id");
			$(currentId + "_content").css("display", "block");
		}, function() {
			// Quand la souris s'en va ...
			var currentId = $(this).attr("id");
			$(currentId + "_content").css("display", "none");
		});
	});
</script>
<div id="menuBar">
	<ul>
		<li id="menu1">menu1</li>
		<li id="menu2">menu2</li>
	</ul>
	<div id="menu1_content" style="display:none">
		<h1>Trop cool</h1>
		<img src="ton_image.png" alt="mmh" title="pouet" />
	</div>
	<div id="menu2_content" style="display:none">
		<h1>Trop cool</h1>
		<img src="ton_image.png" alt="mmh" title="pouet" />
	</div>
</div>

Après il faut bien évidemment appliquer le style à tes divs pour que tous soit en forme!

3/ Je ne vois aujourd'hui que très peu d'inconvénients à utiliser JavaScript. Le plus important est le risque que l'utilisateur est désactivé ce dernier sur son poste, ce qui est extrêmement rare, environ 10% des gens sont dans ce cas. Il faut compter dans ce pourcentage (totalement approximatif) tous les gens qui utilisent des navigateurs où Javascript n'est pas installé nativement (Lynx, certains PDA, etc.).

Bon dév'

[°°° Zen-Spirit °°°]

Gaëtan et Firehiste,
Merci de vos conseils et de m'avoir aidé.
Vos conseils m'ont beaucoup aidé et m'ont fait avancé.
Cependant je pose une question qui n'a peut être rien à voir :
- Je suis entrain de construire ma page web, c'est à dire ma page index. Lorsque je fais un test dan le navigateur FIREFOX en local, tout marche nickel, et quand je l'ouvre dans Internet Explorer 8, la page ne s'affiche pas du tout et il m'affiche le message suivant : "Internet Explorer ne peut pas afficher cette page Web " Et juste en dessous, j'ai un onglet "Diagnostiquer les problèmes de connecxion".
Savez vous d'où peut venir le problème ?