Discussion :

[Mr_SATAN]

Bonjour à tous !

Voilà, je suis en pleine refonte d'un de mes sites auquel j'ai intégré un menu déroulant vertical en JavaScript. J'ai réussi à le modifier à ma convenance mais il me reste encore à modifier 2 ou 3 petites choses pour être vraiment parfait
Je suis débutant en JS, pourriez vous m'aider à y voir plus clair dans tout ce code svp ?

La page de test se trouve à cette adresse.

Je voudrais que le mouvement des rubriques soit plus fluide, que les titres aient l'air de glisser et de s'imbriquer les uns au dessus des autres de façon plus élégante (j'espère être assez clair).
Il faudrait également qu'après quelques secondes d'inactivité il revienne à sa position initiale.
Et tant qu'on y est je n'arrive pas à créer des liens sur les titres principaux sans que ça bloque le reste.

Voici le code JS utilisé :

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
document.write();
 
mv2_menu = new Array();
mv2_lien = new Array();
 
mv2_menu[0] = '<img src="images/titre_news.png" border="0" />';
mv2_menu[1] = '<img src="images/titre_groupe.png" border="0" />';
mv2_menu[2] = '<img src="images/titre_concerts.png" border="0" />';
mv2_menu[3] = '<img src="images/titre_medias.png" border="0" />';
mv2_menu[4] = '<img src="images/titre_contacts.png" border="0" />';
mv2_menu[5] = '<img src="images/titre_extras.png" border="0" />';
 
 
mv2_lien[0] = ''
mv2_lien[1] = ''
mv2_lien[2] = ''
mv2_lien[3] = ''
mv2_lien[4] = ''
mv2_lien[5] = ''
mv2_lien[1] += '<A HREF="http://www.tenaciousdfrance.fr" CLASS=mv2style>HISTOIRE</A><BR>';
mv2_lien[1] += '<A HREF="http://www.tenaciousdfrance.fr" CLASS=mv2style>DISCOGRAPHIE</A><BR>';
mv2_lien[1] += '<A HREF="http://www.tenaciousdfrance.fr" CLASS=mv2style>FILMOGRAPHIE</A><BR>';
mv2_lien[1] += '<A HREF="http://www.tenaciousdfrance.fr" CLASS=mv2style>JACK BLACK</A><BR>';
mv2_lien[1] += '<A HREF="http://www.tenaciousdfrance.fr" CLASS=mv2style>KYLE GASS</A><BR>';
mv2_lien[3] += '<A HREF="http://www.tenaciousdfrance.fr" CLASS=mv2style>VIDEOS</A><BR>';
mv2_lien[3] += '<A HREF="http://www.tenaciousdfrance.fr" CLASS=mv2style>PHOTOS</A><BR>';
mv2_lien[3] += '<A HREF="http://www.tenaciousdfrance.fr" CLASS=mv2style>MUSIQUES</A><BR>';
mv2_lien[4] += '<A HREF="http://www.tenaciousdfrance.fr" CLASS=mv2style>ECRIVEZ-MOI</A><BR>';
mv2_lien[4] += '<A HREF="http://www.tenaciousdfrance.fr" CLASS=mv2style>FORUM</A><BR>';
mv2_lien[4] += '<A HREF="http://www.tenaciousdfrance.fr" CLASS=mv2style>SITES AMIS</A><BR>';
mv2_lien[5] += '<A HREF="http://www.tenaciousdfrance.fr" CLASS=mv2style>DELIRES</A><BR>';
mv2_lien[5] += '<A HREF="http://www.tenaciousdfrance.fr" CLASS=mv2style>BOUTIQUE</A><BR>';
mv2_lien[5] += '<A HREF="http://www.tenaciousdfrance.fr" CLASS=mv2style>GOODIES</A><BR>';
 
 
mv2_pos = -1;
 
function mv2_menu_draw()
	{
	mv2_aff = "<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=160><TR><TD><TABLE BORDER=0 CELLPADDING=03 CELLSPACING=1 WIDTH=100%>";
 
	for(a=0;a<mv2_menu.length;a++)
		{
		if(mv2_pos == a || !document.getElementById)
			bgcolor = "";
		else
			bgcolor = "";
	if(document.getElementById)
			mv2_aff += "<TR><TD><A HREF=\"http://www.tenaciousdfrance.fr\" onMouseOver=\"mv2_pos="+a+";mv2_menu_draw()\" CLASS=mv2style>"+mv2_menu[a]+"</A></TD></TR>";
		else
			mv2_aff += "<TR><TD>"+mv2_menu[a]+"</TD></TR>"
	if(mv2_pos == a || !document.getElementById)
			mv2_aff += "<TR><TD><FONT FACE=\"arial\" SIZE=3><B>"+mv2_lien[a]+"</B></FONT></TD></TR>";
		}
 
	mv2_aff += "</TABLE></TD></TR></TABLE>";
	if(document.getElementById)
		document.getElementById("mv2").innerHTML = mv2_aff;
	else
		document.write(mv2_aff);
	}
 
mv2_menu_draw();

Je remercie d'avance ceux qui prendront un moment pour me filer un coup de main

[Auteur]

bonjour,

des document.write(), des innerHTML, des balises écrites en majuscules à vue de nez ce script n'est plus tout jeune

Je voudrais que le mouvement des rubriques soit plus fluide, que les titres aient l'air de glisser et de s'imbriquer les uns au dessus des autres de façon plus élégante (j'espère être assez clair).

Peut-être trouveras-tu quelque chose qui réponde à ta question dans la galerie CSS :
http://css.developpez.com/galerie/?page=menus-verticaux
Les deux premiers exemples de menus verticaux répondent, je crois, à tes besoins.

[Mr_SATAN]

Bonjour Auteur !

Merci pour ta réponse et pour le lien vers la mine d'or que tu viens de me filer ! je vais jeter un œil à ça et tester es différents menus et je viendrai redonner mon avis

[Mr_SATAN]

Re-bonjour !

Bon, j'ai étudié les différents menus susceptibles de correspondre à mes attentes malheureusement rien ne s'en rapproche vraiment. Je trouve que les menus CSS sont pratiques et assez léger mais ils ont un déroulement mécanique assez "froid" que je cherche justement à éviter.
En gros pour traduire ça en français le code CSS permet de dire : "clique sur le bouton : la cellule de 20px devient une cellule de 80px, clique sur un autre bouton elle redevient une cellule de 20px". Moi je voudrais plutôt lui dire "clique sur le bouton : la cellule s'étend progressivement de 20px à 80px, éloigne ta souris la cellule se rétracte de 80px à 20px en 2 secondes" (c'est un peu imagé mais c'est comme ça que je pense mes codes )

Du coup je pense que seul JS pourra m'aider dans ce sens. On m'a également parlé de jQuery mais je ne connais pas du tout. Vous pensez que c'est une piste à suivre ?