Menu et sous menu déroulant

Version imprimable

Bonjour,

dans l'optique de la refonte d'un site internet, j'aimerais changer le menu.
Ce que j'aimerais faire c'est une sorte de menu déroulant, horizontal et sous l'image du site. En cliquant sur la catégorie souhaitée, on obtient une liste comportant les sous-catégories.
Puis en cliquant sur les sous-catégories, la page appelée s'ouvre.

1er problème : comment puis-je faire ce menu en utilisant une base de données ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 create table sommaire( numSommaire int(10) NOT NULL AUTO_INCREMENT, nomSommaire VARCHAR2(25), CONSTRAINT Pk_Sommaire PRIMARY KEY (numSommaire)); INSERT INTO SOMMAIRE VALUES (1, 'Accueil'); INSERT INTO SOMMAIRE VALUES (2, 'Eau'); INSERT INTO SOMMAIRE VALUES (3, 'Electricité'); INSERT INTO SOMMAIRE VALUES (4, 'Eclairage public'); INSERT INTO SOMMAIRE VALUES (5, 'GRD'); INSERT INTO SOMMAIRE VALUES (6, 'Contact'); INSERT INTO SOMMAIRE VALUES (7, 'Liens utiles'); INSERT INTO SOMMAIRE VALUES (8, 'Relevés');
J'ai bien entendu la fonction de connexion à la base
Code:

1 2 3 4 5 $base = mysql_connect('localhost', 'root', ''); mysql_select_db('ume', $base); $req = mysql_query("SELECT * FROM sommaire"); $requete = mysql_query($req, $base);
Si vous pouviez m'aider, merci ! Je posterais mes autres problèmes ensuite.

Personnellement je ne le verrait pas comme ça. Je verrais plutôt une table catégories:

Code:

1
2
3
4
5
6
7
8
9
 
CREATE TABLE IF NOT EXISTS `categories` (
  `id` BIGINT(25) NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(90) NOT NULL,
  `description` TEXT NULL,
  `parent` BIGINT(25) NULL,
  PRIMARY KEY (`id`),
  UNIQUE (`name`)
) ENGINE=innodb;

Ainsi tu peux créer tes menu en fonction des catégories avec des catégories parentes:

Code:

1
2
3
4
5
6
7
8
9
10
11
 
INSERT INTO `categories` (`id`,`name`, `description`) VALUES
(0, 'index', 'Sommaire'); 
INSERT INTO `categories` (`id`,`name`, `description`, `parent`) VALUES
(1, 'cat1', 'Première catégorie', 0),
(2, 'cat1', 'Seconde catégorie', 0),
(3, 'cat1', 'Troisième catégorie', 0),
(4, 'cat11', 'Première catégorie > sous categorie 1', 1),
(5, 'cat12', 'Première catégorie > sous categorie 2', 1),
(6, 'cat13', 'Première catégorie > sous categorie 3', 2),
(7, 'cat21', 'Seconde catégorie > sous categorie 1', 0);

Ensuite, tu n'a plus qu'a construire le menu ;)

--- EDIT: j'ai fait ça à l'arache et ça marche pas en fait >>> voir 2 post plus loin

04/01/2011, 11h18
feldi

J'ai édité le titre, il est plus juste ainsi.

Je ne comprends pas trop les bases que tu me proposes :?
Est-ce que tu peux un peu expliciter ?
04/01/2011, 11h20
stealth35

Citation:

Envoyé par feldi

J'ai édité le titre, il est plus juste ainsi.

Je ne comprends pas trop les bases que tu me proposes :?
Est-ce que tu peux un peu expliciter ?

dans ta base ou voit on les sous catégories ?

Ah bah oui, c'est exact.
Merci. Je vais donc changer mes bases.

En fait je l'avais déjà fait mais je pensais pas que ça me servirait. :/

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
 
create table sousCateg(
	numSousCateg int(10) NOT NULL AUTO_INCREMENT,
	nomSousCateg VARCHAR2(25),
	numSommaire int(10) NOT NULL,
	CONSTRAINT Pk_sousCateg PRIMARY KEY (numSousCateg)
	CONSTRAINT Fk_sousCateg FOREIGN KEY (numSommaire) REFERENCES SOMMAIRE (numSommaire)
	);
 
-- Accueil
INSERT INTO sousCateg VALUES (1, 'Présentation générale', 1);
-- Eau
INSERT INTO sousCateg VALUES (2, 'Présentation technique', 2);
INSERT INTO sousCateg VALUES (4, 'Contrôle sanitaire', 2);
INSERT INTO sousCateg VALUES (5, "Tarif de l\'eau potable", 2); 
INSERT INTO sousCateg VALUES (6, 'Règlement de service', 2);
INSERT INTO sousCateg VALUES (7, 'Rapport annuel', 2);
INSERT INTO sousCateg VALUES (8, 'Relevé de vos index', 2);
-- Electricité
INSERT INTO sousCateg VALUES (9, 'Présentation technique', 3);
INSERT INTO sousCateg VALUES (10, 'Tarifs règlementés', 3);
INSERT INTO sousCateg VALUES (11, 'Infos EJP', 3);
INSERT INTO sousCateg VALUES (12, 'Infos factures', 3);
INSERT INTO sousCateg VALUES (13, 'Statistiques coupures', 3);
INSERT INTO sousCateg VALUES (14, 'Relevé de vos index', 3);
-- Marché public
INSERT INTO sousCateg VALUES (15, 'Dématérialisation des marchés publics', 4);
-- GRD
INSERT INTO sousCateg VALUES (16, 'Photovoltaïque', 5);
INSERT INTO sousCateg VALUES (17, 'Catalogue des prestations', 5);
INSERT INTO sousCateg VALUES (18, 'Barème de raccordement', 5);
-- Contact
INSERT INTO sousCateg VALUES (19, 'Vos interlocuteurs', 6);
INSERT INTO sousCateg VALUES (20, 'E-mail', 6);
INSERT INTO sousCateg VALUES (21, "Plan d\'accès", 6);
INSERT INTO sousCateg VALUES (22, "Horaires d\'ouverture", 6);
INSERT INTO sousCateg VALUES (23, 'Communes desservies', 6);
-- Liens utiles
INSERT INTO sousCateg VALUES (24, 'Liens utiles', 7);
INSERT INTO sousCateg VALUES (25, "Relevés d\'index en cas d\'absence", 7);
-- Historique des relevés
INSERT INTO sousCateg VALUES (26, "Analyse d\'eau", 8);
INSERT INTO sousCateg VALUES (27, "Qualité de l\'eau", 8);

ça va aussi de cette façon? Même si c'est pas exactement comme tu m'as montré ?

1 pièce(s) jointe(s)

Comme tu as fait là c'est pas faux. Je trouvais ça plus cohérent de tout mettre dans une seule table avec une relation 1-n sur elle même:
http://www.developpez.net/forums/att...1&d=1294137791

Ainsi, tu peux créer autant de catégories et de niveaux de sous catégories que tu souhaite, avec une seule table, en gardant la sécurité des contraintes.

Le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 CREATE TABLE IF NOT EXISTS `mydb`.`categories` ( `id` BIGINT(25) UNSIGNED NOT NULL AUTO_INCREMENT , `name` VARCHAR(90) NOT NULL , `description` TEXT NULL , `parent_category` BIGINT(25) UNSIGNED NULL , PRIMARY KEY (`id`) , INDEX `fk_categories_categories` (`parent_category` ASC) , UNIQUE INDEX `unique_name` (`name` ASC) , CONSTRAINT `fk_categories_categories` FOREIGN KEY (`parent_category` ) REFERENCES `mydb`.`categories` (`id` ) ON DELETE NO ACTION ON UPDATE NO ACTION) ENGINE = InnoDB
Insérer une catégorie racine:
Code:

1 2 insert into categories (`name`,`description`,`parent_category`) values ('root', 'Index', null);
Insérer une sous catégorie (sous la racine):
Code:

1 2 insert into categories (`name`,`description`,`parent_category`) values ('Cat1', 'First category', 1);
(bon et cette fois c'est testé et ça marche :p)

Je te fais un exemple de requête de séléction bouge pas.

04/01/2011, 11h52
feldi

"Je trouvais ça plus cohérent de tout mettre dans une seule table avec une relation 1-n sur elle même:"

Ouh la, j'ai pas encore vu ça moi ! Bon après l'essentiel c'est que ça fonctionne.
(juste par curiosité, c'est quel niveau d'études les tables à relation 1-n sur elles-mêmes?)
04/01/2011, 12h24
Benjamin Delespierre

3 pièce(s) jointe(s)

(on voit ça en première année.)

En fait, si tu regarde tes tables sommaire et sousCateg tu te rends compte qu'elles sont identiques à un champ près: le numéro de la catégorie parente (dans sommaire).

C'est exactement comme si je te disait de modéliser une table personne avec la cardinalité suivante: "une personne est mariée à une autre personne". Si tu considère l'exemple suivant:
http://www.developpez.net/forums/att...1&d=1294139673(j'aime les schémas)

Dans cet exemple, le trait en pointillé caractérise une relation "un homme à une femme et une seule." (si c'était "un homme à obligatoirement une femme et une seule", le trait serait plein et le champ marqué en rouge ferait partie de la clé).

Cet exemple n'est pas faux, mais il ne permet pas de modéliser les mariages homosexuels par exemple. De plus, on constate une redondance entre les tables hommes et femmes qui ont en commun le nom, le prénom et la date de naissance.

Il pourra donc s'avérer judicieux de généraliser tout ça:
http://www.developpez.net/forums/att...1&d=1294140117

Dans ce dernier exemple, on a fait disparaitre une table inutile, on a pour cela créé une table personne avec un champ sexe permettant de différencier les hommes de femmes. La relation permet les mariages homosexuels, si on avait voulu faire de la polygamie / polyandrie, on aurait pu faire:
http://www.developpez.net/forums/att...1&d=1294140236
(note que la cardinalité est devenue 1-n).

Toujours en se plaçant dans mon dernier exemple de la table categories , la requête permettant d'obtenir la liste des catégories et leur catégories parentes est:
Code:

1 2 select a.`name` as `name`, b.`name` as `parent_name` from categories as a join categories as b on (a.`parent_category`=b.`id`);
Avec les valeurs suivantes :
Code:

1 2 3 4 5 6 7 8 9 insert into categories (`name`,`description`,`parent_category`) values ('root', 'Sommaire', null), /*id 1*/ ('cat1', 'Première catégorie', 1), /*id 2*/ ('cat2', 'Seconde catégorie', 1), /*id 3*/ ('cat3', 'Troisième catégorie', 1), /*id 4*/ ('cat11', 'Sous catégorie 11', 2), ('cat12', 'Sous catégorie 12', 2), ('cat31', 'Sous catégorie 31', 4);
produit:
http://www.developpez.net/forums/att...1&d=1294141276

Je réfléchis à un algo pour modéliser le menu et je reviens.

04/01/2011, 13h19
feldi

Wah ! :calim2:
ça en fait des choses à retenir la. Rassure moi, quand tu parles de 1ère année, c'est bien 1ère année d'école d'ingénieur ?
Je suis en 2ème année de BTS IG et je n'ai jamais vu ça.

Merci beaucoup pour le mal que tu te donnes pour moi.
04/01/2011, 14h02
Benjamin Delespierre

ça faisait partie de ma première année d'IUT en Analyse et Conception des Systèmes d'Information. On avait un bon prof pour le cours.

Si ça t'intéresse la l'analyse, tu peux jeter un oeil aux méthodes Merise et Lapage:
http://fr.wikipedia.org/wiki/Merise_%28informatique%29
http://www.priceminister.com/offer/b...que-Livre.html

Tu ne trouvera pas beaucoup de cours sur internet sur Lapage pour la bonne raison que c'est notre prof et sa collègue qui ont écrit ce bouquin, et à part de lui, j'ai jamais entendu parler de cette méthode. Mais elle est très puissante.
04/01/2011, 14h03
stealth35

c'est un façon simple de le concevoir cette manière mais qui n'est pas simple a mettre en place après surtout en itération, tu peu t'orienter vers la technique nested :
http://dev.mysql.com/tech-resources/...ical-data.html

j'ai vu un article sympa sur les différentes techniques de menu je vais le retrouver

EDIT : retrouver -> Models for hierarchical data@@AMEPARAM@@ssplayer2.swf?doc=modelsforhierarchicaldata-100520123959-phpapp02&stripped_title=models-for-hierarchical-data@@AMEPARAM@@modelsforhierarchicaldata-100520123959-phpapp02@@AMEPARAM@@models-for-hierarchical-data
04/01/2011, 14h07
feldi

Citation:

Envoyé par Benjamin Delespierre

Si ça t'intéresse la l'analyse, tu peux jeter un oeil aux méthodes Merise et Lapage:
http://fr.wikipedia.org/wiki/Merise_%28informatique%29
http://www.priceminister.com/offer/b...que-Livre.html

On a fait du Merise en première année, mais pas aussi "poussé". On est en train de voir la méthode étendue, Merise 2, donc peut être que ça viendra.

Merci pour vos réponses.
Reste plus qu'à trouver comment faire un menu en utilisant ces informations :p

Au fait, au fur et à mesure de vos réponses, je me demande :
on est bien toujours sur mon problème de menu la ?
Quelque chose de ce style ? (on rigole pas sur mon talent artistique !)
http://img152.imageshack.us/img152/3...lustration.png

En bleu l'image, en dessous mon menu. Quand je clique sur une case du menu, il se déroule et dans les cases déroulées, il y a les sous menus.

1 pièce(s) jointe(s)

J'ai trouvé un bout de code sur stack overflow qui correspond bien à ce que tu veux faire et qui s'adapte parfaitement au cas présent:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function generate_tree_list($array, $parent = 0, $level = 0)
{
    $buffer = "";
    $has_children = false;
    foreach($array as $key => $value)
    {
        if ($value['parent_id'] == $parent)
        {
            if ($has_children === false)
            {
                $has_children = true;
                $buffer .= '<ul class="level-' . $level . '">';
                $level++;
            }
            $buffer .= '<li><a href="?id=' . $value['id'] . '">' . $value['description'] . '</a>' .
                       generate_tree_list($array, $key, $level) .
                	   '</li>';
        }
    }
    if ($has_children === true) $buffer .= '</ul>';
    return $buffer;
}

Edit: j'allais oublier le lien: http://stackoverflow.com/questions/3...w-with-php-sql
A mettre avec tes librairies.

Pour l'appeller, voilà un exemple testé en situation réele:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
$mysql_connection = mysql_connect('localhost', 'root', '');
mysql_select_db('menu', $mysql_connection);
 
$query = "select a.`name` as `name`, a.`description` as `description`, b.`name` as `parent_name` from categories as a join categories as b on (a.`parent_category`=b.`id`) order by b.`name`";
if ($results = mysql_query($query, $mysql_connection))
{
	$categories = array();
	while ($row = mysql_fetch_assoc($results))
	{
		$categories[$row['name']] = array(
			'id'        => $row['name'],
			'description' => $row['description'],
			'parent_id'      => $row['parent_name']);
	}
 
	echo generate_tree_list($categories, 'root');
}
else
{
	die('Error while fetching menu entries!');
}

ça produit:
http://www.developpez.net/forums/att...1&d=1294148513

Bon maintenant il faut que je retrouve mon bout de code CSS capable d'afficher et de cacher des nodes de menus déroulant sans Javascript et c'est gagné ;)

@stealth35 je suis pas convaincu que cette technique soit plus simple...

04/01/2011, 14h45
Benjamin Delespierre

Citation:

Envoyé par feldi

Au fait, au fur et à mesure de vos réponses, je me demande :
on est bien toujours sur mon problème de menu la ?
Quelque chose de ce style ? (on rigole pas sur mon talent artistique !)
http://img152.imageshack.us/img152/3...lustration.png
.

Une seconde, ça vient.

Edit: Damned, je l'ai pas sur moi, il faut que je le refasse...
04/01/2011, 14h54
stealth35

Citation:

Envoyé par Benjamin Delespierre

@stealth35 je suis pas convaincu que cette technique soit plus simple...

plus simple au final oui, c'est toujours plus simple de faire de l'itératif que du récursif ;), suffis de voir les ressources que tu bouffes pour faire ton menu
04/01/2011, 15h39
Benjamin Delespierre

Citation:

Envoyé par stealth35

plus simple au final oui, c'est toujours plus simple de faire de l'itératif que du récursif ;), suffis de voir les ressources que tu bouffes pour faire ton menu

Bof, une toute petite récursion sur un invariant pas bien lourd :D
Enfin, j'ai jeté un œil à la technique proposée sur le site de MySQL,c'est vrai que c'est bien, mais si j'ai tout compris, on ne peut théoriquement pas avoir un niveau de nesting infini, et les requêtes pour avoir l'ensemble de l'arbre consomment de toute façon de la mémoire. Après, ça dépend où tu veux mettre la charge.

Reconnais quand même que comme ça c'est pas bien compliqué ;)
05/01/2011, 08h23
feldi

Citation:

Envoyé par Benjamin Delespierre

Bon maintenant il faut que je retrouve mon bout de code CSS capable d'afficher et de cacher des nodes de menus déroulant sans Javascript et c'est gagné ;)

Techniquement ce code CSS servirait à quoi ? Afficher les sous-menus en cliquant sur le menu principal ?

Plutôt dérouler les sous menu au passage de la souris sur les éléments parents. J'avais réalisé des règles CSS qui permettaient de le faire à un niveau infini. Mais je ne retrouve plus mon travail.

En fait je vais pas avoir le temps de le refaire. Il va faloir te débrouiller, voici tout de même un début de piste:

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
 
#menu {
	width: 500px;
	margin: 10px auto;
}
 
#menu a,
#menu a:hover,
#menu a:link,
#menu a:visited {
	color: #333;
}
 
#menu ul {
	display: none;
}
 
#menu > ul {
	display: block;
}
 
#menu > ul > li {
	float: left;
}
 
#menu li {
	float: none;
	display: block;
}
 
#menu li a {
	display: block;
	width: 130px;
	height: 23px;
	padding: 5px;
	margin: 3px;
	border: 1px solid #aaa;
	text-align: center;
}
 
#menu li:hover > ul {
	display: block;
	position: relative;
 
}
 
#menu li:hover > ul > li {
	position: absolute;
	bottom: -50px;
	left: -9px;
}

Dans l'état ça marche pas bien, adapte-le un peu...

Pour un code HTML de la forme:

Code:

1
2
3
 
 
<div id="menu"><ul class="level-0"><li><a href="?id=cat1">Première catégorie</a><ul class="level-1"><li><a href="?id=cat11">Sous catégorie 11</a></li><li><a href="?id=cat12">Sous catégorie 12</a></li></ul></li><li><a href="?id=cat2">Seconde catégorie</a></li><li><a href="?id=cat3">Troisième catégorie</a><ul class="level-1"><li><a href="?id=cat31">Sous catégorie 31</a><ul class="level-2"><li><a href="?id=cat311">Sous sous catégorie 311</a></li></ul></li></ul></li></ul></div>

05/01/2011, 13h20
feldi

Merci beaucoup.
Dès que je pourrais j'essayerais ton code.

Je ne mets pas (encore) le sujet en résolu, si quelqu'un a quelque chose à rajouter ou modifier.
06/01/2011, 13h48
feldi

J'ai testé et effectivement ça donne ce que tu avais mis en pièce jointe.

Est-ce qu'il y aurait moyen de le modifier pour que le menu soit horizontale ? Puis que les sous-catégories soient verticales ? Pour l'instant, tout est vertical.

Pour le CSS, est-ce que je peux l'inclure dans une feuille vierge puis appeler cette feuille depuis la page ou je fais apparaître le menu ? Le problème étant que la page du menu est appelée sur toutes les autres pages de mon site et je dispose de liste à puces dans quasi toutes les autres pages, donc le coup de dérouler la liste ne m'intéresse que pour ce menu la.

Question bonus (:P) : comment je peux intégrer un lien à chaque sous menu ?
Par exemple quand l'utilisateur clique sur le sous-menu page principale, le site le redirige vers la page principale.
Est-ce que vous verriez une astuce pour l'ajouter à un endroit de la fonction ou même dans la base de données peut-être ?

Merci à ceux qui répondront !

Bonjour,

J'ai fouillé un peu le web et j'ai trouvé du code CSS qui pourrait correspondre à ce dont m'a parlé Benjamin Delespierre.
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 ul { margin:0; padding:0; list-style-type:none; text-align:center; } li { float:left; margin:auto; padding:0; color: black; } li a { display:block; width:100px; color:white; text-decoration:none; padding:5px; color: black; } li a:hover { color:#FFD700; } ul li ul{ display: none; color: black; } ul li:hover ul { display:block; color: black; } li:hover ul li { float:none; color: black; } li ul{ position: absolute; }
Donc les menus principaux compris dans les ul s'affichent bien, par contre, je n'arrive pas à afficher les sous-menus (compris dans les li).
J'aimerais bien également pouvoir rediriger les utilisateurs vers les pages concernées par les sous-menus.

J'ai pensé faire un code php du genre :
Code:

1 2 3 4 5 if $id = 'cat21' { presentationTechniqueEau.php }
Donc :
1/ Est-ce que la syntaxe est bonne ? J'ai un doute mais sait-on jamais...

2/ Est-ce que cette manière de faire ne réduirait pas toute la première partie à rien ? Y a t-il une autre manière de procéder ?

Merci !

07/01/2011, 10h09
Benjamin Delespierre
L'astuce c'est de jongler entre les expressions
Code:

1 2 3 4 #menu ul #menu li #menu li:hover
et
Code:

1 2 3 #menu > ul #menu > ul > li
Pour rappel; "a > b" désigne tous les éléments b immédiatement précédés de a alors que "a b" désigne tous les éléments b ayant un ancêtre a.

Pour les liens de ton menu, tu peux toujours modifier le code de génération du menu ou bien faire comme tu as mis.
J'ai tendance à préférer la deuxième solution; si tu mets des index alphanumériques, tu peux faire de l'URL rewriting derrière avec des liens de la forme:
Code:

1 2 href="index.php?rt=UnePage&section=UnSection
que tu tranforme en
Code:

1 2 monsite.com/UnePage/UneSection
Les moteurs de recherche sont très friands de cette syntaxe.
Par ailleurs, index.php devient un front controlleur: tout passe par lui, ça factorise donc tout un tas de choses et tu peux faire des vérifications d'usage dans ce script.
Documente-toi ici: http://en.wikipedia.org/wiki/Front_Controller_pattern

A toi d'adapter le code pour que ça marche...