[DOM] Recherche tutoriel menu déroulant

Version imprimable

03/07/2008, 11h44
SirDarken

[DOM] Recherche tutoriel menu déroulant

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.
03/07/2008, 11h55
SpaceFrog

une piste coté css?
http://css.developpez.com/tutoriels/menu-deroulant/
03/07/2008, 12h29
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:

1 2 3 Menu1 > Smenu1,Smenu2 Menu2 > Smenu4,Smenu5
Car là c'est plus
Code:

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 ?)
03/07/2008, 14h47
Matthieu2000

remplace

Citation:

li

par

Citation:

span

ou tout autre tag qui ne fais pas de retour chariot
03/07/2008, 15h06
Thes32

salut,
un autre exemple http://www.k64.fr/menus_finaux/menu_1
03/07/2008, 15h47
SirDarken

le menu de thes32 me vas parfaitement, j'essaye de voir le tuto qui mène à ca
03/07/2008, 16h39
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.
03/07/2008, 16h52
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.
03/07/2008, 17h13
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 ^^.
03/07/2008, 17h24
Thes32

Citation:

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 ;)
04/07/2008, 12h24
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
04/07/2008, 13h27
Thes32
Citation:

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

ben, dans le css t'as ça
Code:

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

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

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

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
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

04/07/2008, 15h07
Thes32

pour l'instant j'ai pas beaucoup de temps pour suivre ce détail, fais une inspection avec firebug
04/07/2008, 16h31
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.