OVH Cloud OVH Cloud

Menu en "+"

12 réponses
Avatar
Armstrong
Bonjour à tous,

C'est la première fois que je viens ici. Je ne connais pas grand chose en
php, j'epère que qqun pourra m'aider.
Voilà : J'essaie de faire un "menu" un peu comme dans l'explorateur avec des
"+" quand on clic dessus, ca affiche la suite des possibilités sans
recharger la page (ca doit vous paraître très simple !).
Connaissez vous un script pour ca ?
Quelle fonction dois-je utiliser ?

Merci pour le temps que vous accorderez à ma demande ;-)

Armstrong

10 réponses

1 2
Avatar
Jean-Marc Molina
Pour un débutant je pense que c'est très compliqué à mettre en oeuvre.
Surtout si tu souhaites reproduire le comportement de Explorer.

Il faut t'y connaître en PHP pour afficher l'arborescence (récursivité).
HTML pour construire l'arbre correctement. JavaScript pour gérer les
événements quand on clique sur un +, pour étendre la branche ou - pour la
réduire.

Pour une mise à jour sans rechargement de la page, à voir plus tard il
s'agit de Remote Scripting. Une technique qui permet de générer la nouvelle
branche (par exemple) dans un IFRAME caché, d'en récupérer le contenu et de
l'insérer au bon endroit dans ton arbre. Complexe.

Dans un premier temps si tu parviens à faire un simple arbre qui
s'affiche... Ça sera déjà pas mal :).

Tu peux trouver de tel scripts sur http://www.phpscripts-fr.net/ .

JM

--
Boycothon (Contre l'e-censure) : http://www.odebi.org/boycothon/ ~ « Le LEN
tue la démocratie ».
Avatar
denisb
Armstrong wrote:

Bonjour à tous,

C'est la première fois que je viens ici. Je ne connais pas grand chose en
php, j'epère que qqun pourra m'aider.
Voilà : J'essaie de faire un "menu" un peu comme dans l'explorateur avec des
"+" quand on clic dessus, ca affiche la suite des possibilités sans
recharger la page (ca doit vous paraître très simple !).
Connaissez vous un script pour ca ?
Quelle fonction dois-je utiliser ?

Merci pour le temps que vous accorderez à ma demande ;-)

Armstrong


si pas de rechargement de la page, alors pas de php...
mais bon... question récurente (dans le sens qu'elle gratte fort)..

dans ton <head> donc :

<style type="text/css">
ul {width:160px;margin-left: 0em;padding-left: 1em}
li {list-style-type:none;padding-top:.3em;font-size:9px;}
.montre {display:block;}
.masque {display:none;}
</style>

<script type="text/javascript">
function bascule(id) {
ul = "ul_" + id;
ulElement = document.getElementById(ul);
if (ulElement) {
if (ulElement.className == 'montre') {
ulElement.className = "masque";
ecrire_arbre(ul, 0);
} else {
ulElement.className = "montre";
ecrire_arbre(ul, 1);
}
}
}
</script>

dans ton <body> :

<li><a onclick="bascule('n1');">NIVEAU 1</a>
<ul id="ul_n1" class="montre">
<li><a onclick="bascule('n2');">Niveau 1-1</a>
<ul id="ul_n2" class="masque">
<li><a href="lien1-1-a.html"># Lien 1-1-a</a></li>
<li><a href="lien1-1-b.html"># Lien 1-1-b</a></li>
<li><a href="lien1-1-c.html"># Lien 1-1-c</a></li>
</ul>
</li>
<li><a onclick="bascule('n3');">Niveau 1-2</a>
<ul id="ul_n3" class="masque">
<li><a href="lien1-2-a.html"># Lien 1-2-a</a></li>
</ul>
</li>
<li><a onclick="bascule('n4');">Niveau 1-3</a>
<ul id="ul_n4" class="masque">
<li><a href="lien1-3-a.html"># Lien 1-3-a</a></li>
</ul>
</li>
</ul>
</li>
<li><a onclick="bascule('a1');">NIVEAU 2</a>
<ul id="ul_a1" class="montre">
<li><a onclick="bascule('a2');">Niveau 2-1</a>
<ul id="ul_a2" class="masque">
<li><a href="lien2-1-a.html"># Lien 2-1-a</a></li>
<li><a href="lien2-1-b.html"># Lien 2-1-b</a></li>
<li><a href="lien2-1-c.html"># Lien 2-1-c</a></li>
</ul>
</li>
<li><a onclick="bascule('a3');">Niveau 2-2</a>
<ul id="ul_a3" class="masque">
<li><a href="lien2-2-a.html"># Lien 2-2-a</a></li>
</ul>
</li>
<li><a onclick="bascule('a4');">Niveau 2-3</a>
<ul id="ul_a4" class="masque">
<li><a href="lien2-3-a.html"># Lien 2-3-a</a></li>
</ul>
</li>
</ul>
</li>

tu peux ajouter un cookie pour retrouver ton menu en l'état sur la page
appelée...

pour revenir en charte, le php te servira à gérer les 'id' des 'ul'
automatiquement en fonction, par exemple, d'une bdd.

à voir en action à http://www.1D-photo.org (mais bon, le site est pas
fini fini)

Avatar
Vincent MOTTE
C'est la première fois que je viens ici. Je ne connais pas grand chose en
php, j'epère que qqun pourra m'aider.
Voilà : J'essaie de faire un "menu" un peu comme dans l'explorateur avec
des

"+" quand on clic dessus, ca affiche la suite des possibilités sans
recharger la page (ca doit vous paraître très simple !).
Connaissez vous un script pour ca ?
Quelle fonction dois-je utiliser ?


Tournes toi plus vers un script JavaScript. Le Php ne permet pas gérer ça
dynamiquement ou alors seulement avec un reload de la page.

--
Vincent - http://www.france-dev.com
Logiciel de gestion d'hébergement web

Avatar
Harry Cover
On 22 Jan 2004 23:15:03 GMT, Armstrong
wrote:

Bonjour à tous,

C'est la première fois que je viens ici. Je ne connais pas grand chose en
php, j'epère que qqun pourra m'aider.
Voilà : J'essaie de faire un "menu" un peu comme dans l'explorateur avec des
"+" quand on clic dessus, ca affiche la suite des possibilités sans
recharger la page (ca doit vous paraître très simple !).
Connaissez vous un script pour ca ?
Quelle fonction dois-je utiliser ?

Merci pour le temps que vous accorderez à ma demande ;-)

Armstrong
En javascript, tu dois pouvoir trouver des centaines de scripts pour

faire ca.

Léo.

Avatar
Bruno Baguette

Bonjour,

Voilà : J'essaie de faire un "menu" un peu comme dans l'explorateur
avec des "+" quand on clic dessus, ca affiche la suite des possibilités
sans recharger la page (ca doit vous paraître très simple !).


Sans recharger la page ? Vous voulez donc quelque chose qui fonctionne du
côté client, or PHP fonctionne côté serveur.

Pour votre menu, je verrais plutôt une combinaison Javascript qui joue
sur les propriétés CSS 'visible' et 'display' de blocs DIV. Ainsi,
chaque "+" ouvrirait le bloc DIV correspondant. En travaillant avec
l'évènement onClick du "+", il vous suffit donc d'inverser la valeur
actuelle du bloc DIV (si affiché, alors mettre en visible:hidden et
display:none. Sinon faire le contraire).

Connaissez vous un script pour ca ?
Quelle fonction dois-je utiliser ?


Je vous renvoie vers fr.comp.lang.javascript où vous devriez obtenir ce
genre de renseignements. :-)

Cordialement,

PS : copie et fu2 posé sur fr.comp.lang.javascript

--
----------------------------------------
Bruno Baguette -

Build A Brighter Lamp :: Linux Apache {middleware} PostgreSQL

Avatar
Jean-Marc Molina
En fait j'ai oublié qu'il y avait plus simple, j'ai pris l'exemple trop
complexe pour l'utilisation que tu veux peut-être en faire.

Tu peux générer tout ton arbre d'un seul coup et utiliser des scripts
JavaScript pour afficher ou cacher les branches de ton arbres, à l'aide de
styles : display:'none' pour cacher, display:'block' pour afficher.

PHP + HTML + JavaScript + CSS. Ça commence à faire beaucoup :).

Je te conseille un script tout fait si tu n'as pas le temps de t'y mettre.

JM

--
Boycothon (Contre l'e-censure) : http://www.odebi.org/boycothon/ ~ « Le LEN
tue la démocratie ».
Avatar
Stephane
Bonjour à tous,

C'est la première fois que je viens ici. Je ne connais pas grand chose en
php, j'epère que qqun pourra m'aider.
Voilà : J'essaie de faire un "menu" un peu comme dans l'explorateur avec des
"+" quand on clic dessus, ca affiche la suite des possibilités sans
recharger la page (ca doit vous paraître très simple !).
Connaissez vous un script pour ca ?
Quelle fonction dois-je utiliser ?

Merci pour le temps que vous accorderez à ma demande ;-)

Armstrong



C'est du javascript, si tu ne reloade pas car cote client
pour un script bien connu cherche sur les mot cle "treemenu" et "javascript"

Avatar
Gibier Jean-Charles
PHP et/ou Jscript
http://pear.php.net/package/HTML_TreeMenu
http://phplayersmenu.sourceforge.net/
Avatar
Armstrong
C'est du javascript, si tu ne reloade pas car cote client
pour un script bien connu cherche sur les mot cle "treemenu" et
"javascript"


oui, évidemment, ca je le savais mais je n'ai pas du assez réfléchir...;-)

Avatar
Armstrong
Très bien ton script même si c'est du javascript, c'est en gros ce que je
voulais. Après, je le modèlerai à ma façon, avec mes styles. Déjà, je vais
le décortiquer, et ca c'est pas gagné.

Merci pour tout à tous ceux qui m'ont aidé. C'est pas sur tous les ng aussi
coopératif à ce que je vois ;-)

a+

Armstrong
1 2