Discussion :

[SirDarken]

Bonjour à tous, je cherche à réaliser un menu déroulant vertical, qui affichera le sous-menu sur la droite, voir même avec des sous-sous-menu.

Je doit le faire de façon dynamique (les articles sortent d'une bdd), mon problème est que je trouve pas de tutoriel pour en faire, car oui je ne cherche pas un script déja fait, mais en réaliser un, donc voila si vous avez dans vos favoris un tuto pas à pas ca serai royal.

Mes recherches pour le moment ne poitent que sur des scripts tout fait, et même ici aucuns tutos n'en parle.

Merci à vous.

[SpaceFrog]

une piste coté css?
http://css.developpez.com/tutoriels/menu-deroulant/

[SirDarken]

Je pensais qu'en css ca déconnait sur IE.
Enfin je vais regarder ca plus en détail.
Question somme toutes bêtes je peux faire un menu verticla avec ca ?
tu genre:

Code :

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

1
2
3
 
Menu1 > Smenu1,Smenu2
Menu2 > Smenu4,Smenu5

Car là c'est plus

Code :

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

1
2
3
4
 
Menu1 - Menu2 - Menu 3
Smenu1
Smenu2

Ce qui m'étonne aussi c'est les espaces entre les sous-menu, ca provoque le retrait du menu, faut du coup allez vite sur notre choix ( c'est le padding à changer nan ?)

[Matthieu2000]

remplace

li

par

span

ou tout autre tag qui ne fais pas de retour chariot

[Thes32]

salut,
un autre exemple http://www.k64.fr/menus_finaux/menu_1

[SirDarken]

le menu de thes32 me vas parfaitement, j'essaye de voir le tuto qui mène à ca

[Thes32]

resalut,
y a pas des tutos pour ça, le code est quand même libre, tu fais juste un enregistrer sous (page web complet) puis adapte le code.

[tusssss]

Moi je fais la même chose en DOM avec un peu de css, ca passe tout seul et ca se coordonne pas mal avec le fait d'aller chercher ses données de menu dans une Bdd avec un petit bout de AJAX.

C'est pas académique, mais pas trop dur à réaliser.

[SirDarken]

Ok merci pour le script alors ^^ ( je viens de découvrir l'enregistrement complet d'une page ^^").

Arf je viens de voir pour ajouter un sous-sous-menu suffit pas de rajouter un <li></li>, enfin vais bidouiller ca ^^.

[Edit]
en DOM ?
Je suis pas trop au courant des technologies disponibles, ca fait longtemps que je n'avais pas vu une ligen de code et déja à l'époque j'était que débutant, donc au risque de paraitre bête, bah DOM ca me dit rien ^^.

[Thes32]

Arf je viens de voir pour ajouter un sous-sous-menu suffit pas de rajouter un <li></li>, enfin vais bidouiller ca ^^

t'es sur la bonne voie

[SirDarken]

Bon j'ai commencer à trifouiller et je tombe sur un petit souci (je suis pas trop doué en css).
Pourquoi le menu de base est décalé sur la droite, je veux dire par là que j'ai mis le menu dans un tableau de 150px, et du coup je dirai grosso modo que le menu apparait non pas à 0px mais à 50px.

J'ai rien vu dans le css qui parle ca.

Ensuite pour ajouter un sous-menu de plus a ce que j'ai compris je devrai crée des classes menus UL LI LI {}, c'est vers là ou je doit aussi retoucher le JS ?

Merci

[Thes32]

Pourquoi le menu de base est décalé sur la droite,

ben, dans le css t'as ça

Code css :

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

1
2
3
4
5
6
 
body
{
	...
	margin: 20px;
}

j'ai compris je devrai crée des classes menus UL LI LI {}, c'est vers là ou je doit aussi retoucher le JS

euh non, je pense pas

[SirDarken]

Je n'ai pas copier la class BODY car j'en avait deja une de faite ^^.
Je n'ai pris que cela :

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
 
/* Menu dynamique*/
.menus {
	/*FLOAT:left;*/
	WIDTH:13em;
	BACKGROUND-COLOR:#FFFFFF;
}
/*.menus * { // sert à fait un écart entre les lignes.
	LINE-HEIGHT:2.35em
}*/
.menus {
	BORDER-RIGHT: #00B9FB 1px solid;
	BORDER-TOP: #00B9FB 1px solid;
	BORDER-LEFT: #00B9FB 1px solid;
	BORDER-BOTTOM: #00B9FB 1px solid;
}
.menus UL {
	BORDER-RIGHT: #00B9FB 1px solid;
	BORDER-TOP: #00B9FB 1px solid;
	BORDER-LEFT: #00B9FB 1px solid;
	BORDER-BOTTOM: #00B9FB 1px solid
}
.menus LI {
	LIST-STYLE-POSITION: outside;
	LIST-STYLE-TYPE: none;
}
.menus A {
	PADDING-RIGHT: 1em;
	DISPLAY: block;
	PADDING-LEFT: 1em;
	PADDING-BOTTOM: 1px;
	PADDING-TOP: 1px;
}
.menus LI A {
	COLOR: #888
}
.menus LI A:focus {
	COLOR: #fa5;
	TEXT-DECORATION:none;
}
.menus LI A:hover {
	COLOR: #fa5;
	TEXT-DECORATION:none;
}
.menus LI UL {
	BORDER-TOP: #00B9FB 1px solid;
	MARGIN-LEFT: -1px;
	BORDER-BOTTOM: #00B9FB 1px solid;
	BACKGROUND-COLOR: #FFFFFF;
}
.menus LI LI {
	COLOR: #58f
}
.menus LI LI A {
	WIDTH: 10.9em;
	COLOR: #58f;
	TEXT-DECORATION: none
}
.menus LI LI A:focus {
	BACKGROUND-COLOR: #222
}
.menus LI LI A:hover {
	BACKGROUND-COLOR: #222
}
.Surv.menus LI UL {
	MARGIN-TOP: -2.6em;
	MARGIN-LEFT: 150px;
	POSITION: absolute;
}
.menus A.focusTitle {
	COLOR: #af5;
	TEXT-DECORATION: none;
}
.menus A.blurTitle {
	COLOR: #888;
}
.menus A.focusLink {
	COLOR: #fa5;
	BACKGROUND-COLOR: #222;
}
.menus A.blurLink {
	COLOR: #58f;
	BACKGROUND-COLOR: transparent;
}
.Cache {
	DISPLAY: none;
}

Dans mon body perso j'ai toutes les marges à 0.
Je m'attendais pas à ce qu'un menu dynamique soie si tendu à faire, vu que j'en croise de partout, faut que je me mette un sacré coup pour me réveiller lol

[Thes32]

pour l'instant j'ai pas beaucoup de temps pour suivre ce détail, fais une inspection avec firebug

[SirDarken]

firebug ? enfin te casse pas la tête tu me répondra si tu en as le temps et l'envie, c'est un forum ^^.

Vais me poser le cerveau ce WE ca aidera lundi à reprendre la chose.