Création d'un menu dynamique:

Version imprimable

16/07/2012, 17h56
koKoTis

Création d'un menu dynamique:
Bonjour, je souhaite créer un menu avec sous menu dynamique.
Le but étant que dès que j'ajoute une page sur mon site, le menu affiche automatiquement le lien sans que j'ai besoin d'ajouter le lien moi-même dans le menu.
Le menu doit lister des pages "index.php" et "index.htm", les pages sont présentes dans des sous-dossiers.

Pour l'instant, j'ai un script PHP qui liste les pages présentes dans des sous-dossiers qui eux sont stockés dans le dossier courant, là où se trouve le script, ce script crée donc des liens dont les textes cliquables sont les noms des sous-dossiers, liens qui pointent vers les fichiers "index.php" présents dans les dossiers.
Voici le script en question:
Code:

1 2 3 4 5 6 7 8 <?php $directories = glob("*",GLOB_ONLYDIR); foreach ($directories as $dir) { echo '<a href="'.$dir.'/index.php">'.$dir.'</a> <br> '; } ?>
Donc en fait j'ai plusieurs galeries, donc plusieurs dossiers contenant chacun des sous-dossiers contenants les fichiers "index.php", donc j'ai dans chacun des dossiers sources ce script que j'ai mis ci-haut.
Ce que je voudrais c'est créer un script qui affiche un menu dont les liens parents seraient les noms des dossiers courants, lorsque l'on passerait le curseur de la souris sur un de ces liens un menu contextuel s'afficherait avec d'autres liens qui eux pointeraient vers les fichiers "index.php" contenus dans les sous-dossiers et les textes cliquables de ces liens seraient les noms de ces sous-dossiers.

--------------------

Donc explication en image:

Il y a une liste de dossiers courants:
http://www.parlonsphoto.com/upload/i...oto-294d4a.jpg

Ces dossiers seraient les liens parents du menu.

Puis chacun de ces dossiers courants contient une liste de sous-dossiers:
http://www.parlonsphoto.com/upload/i...oto-r3tndj.jpg
Ces sous dossiers seraient les textes cliquable des liens des menus contextuels.

Ces liens pointeraient vers les fichiers "index.php" contenus dans les sous dossiers:

http://www.parlonsphoto.com/upload/i...oto-dy05oy.jpg

-------------------

En espérant m'être à peu près bien expliqué, je fais appel à votre savoir-faire.
Quelqu'un peut-il m'aider ?
17/07/2012, 10h48
Fench

Bonjour,

Va voir du côté du jQuery pour les menus déroulants, c'est assez simple pour faire je pense comme tu le désires, il y aura juste la création des menus, sous menus et encore plus bas avec la lecture des répertoires.

Je l'ai déjà fais avec des menus et sous menus :)
17/07/2012, 10h50
koKoTis

Merci mais je ne veut pas de menu déroulant ;)

2 pièce(s) jointe(s)

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
<?php 
function dir_scan_html($dir,$niveau=0,$id=0)
{
$html=null;
$html_repertoires=null;
$html_fichiers=null;
	if ($handle = opendir($dir)) {
		while (false !== ($entry = readdir($handle))) {
			$id++;
			if(is_dir($dir."/".$entry))
			{
				if($entry!='..' && $entry!='.')
				{
				 $html_repertoires .= str_repeat("\t",$niveau)."<div id='div_".$id."' style='border:solid 0px #00FF00;' onclick='document.getElementById(\"sub_".$id."\").style.display=\"block\"' onDblclick='document.getElementById(\"sub_".$id."\").style.display=\"none\"'>";
				 $html_repertoires .= str_repeat("<img src='images/vide.png' border='0'>",$niveau);
				 $html_repertoires .= "<img src='images/folder.png' border='0'>";
				 $html_repertoires .= "".$entry."";
				 $html_repertoires .= "";
				 $html_repertoires .= "";
				 $html_repertoires .= str_repeat("\t",$niveau)."</div mid='div_".$id."'>\n";
					//echo ".".$entry."<br>";
				 $niveau++;
				 $html_repertoires .= str_repeat("\t",$niveau)."<div id='sub_".$id."' style='display:none;border:solid 0px #FF0000;' >\n";
				 $html_repertoires .= dir_scan_html($dir."/".$entry,$niveau,$id);
				 $html_repertoires .= str_repeat("\t",$niveau)."</div mid='sub_".$id."'>\n";
				 $niveau--;
				}				
			}else{
				 $html_fichiers .= str_repeat("\t",$niveau)."<div id='fil_".$id."'>";
				 $html_fichiers .= str_repeat("<img src='images/vide.png' border='0'>",$niveau);
				 $html_fichiers .= "<img src='images/file_extension_txt.png' border='0'>";
				 $html_fichiers .= "<a href='".$dir."/".$entry."' target='_blank'>".$entry."</a>";
				 $html_fichiers .= "</div>\n";
					//echo " ".$entry."<br>";
			}
		}
		closedir($handle);
		$html.=$html_repertoires;
		$html.=$html_fichiers;
		return $html;
	}    
}
$html = dir_scan_html(".");
echo $html;
?>

tu met ce code dans l'index.php de ta galerie supérieur
tu crée un sous-répertoire images
tu y met les images : file_extension_txt.png folder.png vide.png
tu obtient quelque chose comme prtscr.png
un click sur le nom du folder montre son contenu
un double click cache le contenu
un click sur un lien fichier ouvre le fichier dans une autre fenêtre

22/07/2012, 11h09
koKoTis

Merci beaucoup :)

Mais ce n'est pas un menu contextuel si ?
22/07/2012, 12h54
patrickbaras

menu contextuel ? que veux tu dire ?
22/07/2012, 13h46
koKoTis

1 pièce(s) jointe(s)

Ca par exemple c'est un menu contextuel ;)
23/07/2012, 10h48
patrickbaras

rien ne t'empêche de le rendre contextuel, tu le met dans un <div> et l'afficher via javascript sur un event onmouseover.
23/07/2012, 10h49
koKoTis

Citation:

Envoyé par patrickbaras

rien ne t'empêche de le rendre contextuel, tu le met dans un <div> et l'afficher via javascript sur un event onmouseover.

Merci mais ce n'est pas un div qu'il me faut mais un vrai menu contextuel ;)

Mais merci beaucoup de ton aide ;)
23/07/2012, 17h44
patrickbaras

si tu veux ton menu dans la barre de firefox ce n'est pas "facilement" possible.
je passe la main.
désolé.
23/07/2012, 18h21
koKoTis

Citation:

Envoyé par patrickbaras

si tu veux ton menu dans la barre de firefox ce n'est pas "facilement" possible.
je passe la main.
désolé.

Non pas dans la barre de firefox, sur le menu de mon site ;)
24/07/2012, 13h34
kalimukti

Citation:

Envoyé par koKoTis

Non pas dans la barre de firefox, sur le menu de mon site ;)

Bonjour,
Si je suis bien ce que vous recherchez, ça ressemble bien à un menu fait par javascript (côté client) à partir de données établies côté serveur. Seul moyen me semble-t-il de reproduire les menus du genre applications windows.
Cordialement
24/07/2012, 13h35
koKoTis

Merci ;)

Mais commet ?
24/07/2012, 13h44
kalimukti

Citation:

Envoyé par koKoTis

Merci ;)

Mais commet ?

Vous trouvez un tuto ici, par exemple.
Ou ici, pour les menus déroulants.

Sinon, le menu contextuel: http://jcrozier.developpez.com/tutor...nu-contextuel/

Merci encore ;)

Donc première question, comment faire un sous meu dans les liens de se code ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul id="myMenu" class="contextMenu">
    <li class="edit">
        <a href="#edit">Edition</a>
    </li>
    <li class="cut separator">
        <a href="#cut">Couper</a>
    </li>
    <li class="copy">
        <a href="#copy">Copier</a>
    </li>
    <li class="paste">
        <a href="#paste">Coller</a>
    </li>
    <li class="delete">
        <a href="#delete">Supprimer</a>
    </li>
    <li class="quit separator">
        <a href="#quit">Quitter</a>
    </li>
</ul>

Citation:

Envoyé par koKoTis

Merci encore ;)

Donc première question, comment faire un sous meu dans les liens de se code ?

Bonjour,

le principe générale, c'est de partir sur des <ul> imbriquées, genre:
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 <ul id="myMenu" class="contextMenu"> <li class="edit"> <a href="#edit">Edition</a> </li> <li class="cut separator"> <a href="#cut">Couper</a> </li> <li class="copy"> <a href="#copy">Copier</a> </li> <li> <ul> <li class="paste"> <a href="#paste">Coller</a> </li> <li class="delete"> <a href="#delete">Supprimer</a> </li> <li class="quit separator"> <a href="#quit">Quitter</a> </li> </ul> </li> </ul>
Le plus simple, à mon avis, est de se servir d'un plugin par exemple de Jquery, comme superfish (exemple) qui te permet en quelques lignes de transformer un ensemble de listes imbriquées directement en menu comme tu recherches...
Hope that was usefull

27/07/2012, 15h07
koKoTis

Merci beaucoup ;)

Dans l'exemple que tu m'a donner, ou trouve t-on le fichier hoverIntent.js ?

reprendre la function que j'ai donné et la simplifier

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
<?php
function dir_scan_menu($dir,$niveau=0,$id=0)
{
$html=null;
$html_repertoires=null;
$html_fichiers=null;
	if ($handle = opendir($dir)) {
		while (false !== ($entry = readdir($handle))) {
			$id++;
			if(is_dir($dir."/".$entry))
			{
				if($entry!='..' && $entry!='.')
				{
				 $html_repertoires .= "";
				 $html_repertoires .= str_repeat("\t",$niveau)."<li>";
				 $html_repertoires .= "".$entry."";
				 $html_repertoires .= "</li>\n";
				 $html_repertoires .= "";
				 $html_repertoires .= str_repeat("\t",$niveau)."<ul>\n";
				 $niveau++;
				 $html_repertoires .= dir_scan_menu($dir."/".$entry,$niveau,$id);
				 $niveau--;
				 $html_repertoires .= str_repeat("\t",$niveau)."</ul>\n";
				}				
			}else{
				 $html_fichiers .= str_repeat("\t",$niveau)."<li>";
				 $html_fichiers .= "<a href='".$dir."/".$entry."'>".$entry."</a>";
				 $html_fichiers .= "</li>\n";
			}
		}
		closedir($handle);
		$html.=$html_repertoires;
		$html.=$html_fichiers;
		return $html;
	}    
}
$html = dir_scan_menu(".");
echo $html;
?>

ce qui donne

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<li>images</li>
<ul>
	<li><a href='./images/folder.png'>folder.png</a></li>
	<li><a href='./images/prtscr.png'>prtscr.png</a></li>
	<li><a href='./images/vide.png'>vide.png</a></li>
	<li><a href='./images/file_extension_txt.png'>file_extension_txt.png</a></li>
</ul>
<li>test1</li>
<ul>
	<li>test11</li>
	<ul>
		<li><a href='./test1/test11/test1.jpg'>test1.jpg</a></li>
		<li><a href='./test1/test11/test11.jpg'>test11.jpg</a></li>
	</ul>
	<li><a href='./test1/test1.jpg'>test1.jpg</a></li>
</ul>
<li><a href='./exploreur.php'>exploreur.php</a></li>