Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Menu vertical contextuel

5 réponses
Avatar
Eric Demeester
Bonjour à toutes et à tous,

Il y a longtemps que je n'avais pas fait appel à vos lumière, mais là je
coince...

J'ai besoin, sur un site que je dois pour diverses raisons développer à
100% à la mimine, d'avoir un menu contextuel sur la gauche, et je
patauge un peu.

En gros, disons qu'à la base j'ai :

Choix 1
Choix 2
- Choix 2.1
- Choix 2.2
Choix 3
- choix 3.1
- choix 3.2
- choix 3.3
- choix 3.3.1
- choix 3.3.2
- choix 3.3.3
- choix 4

etc.

On peut imaginer que les choix 1,2,3 et 4 soient dans un menu horizontal
« immuable ».

Si aucun sous-menu n'est choisi, j'ai besoin d'afficher :

Choix 1
Choix 2
Choix 3
Choix 4

Si un sous-menu est choisi, par exemple 2.1, je veux afficher :

Choix 1
Choix 2 (actif)
- Choix 2.1 (actif)
- Choix 2.2
Choix 3
Choix 4

en indiquant que c'est Choix 2 -> Choix 2.1 qui est actif, donc.

Pareil si je sélection 3.3.2, mais avec un niveau de plus :

Choix 1
Choix 2
Choix 3 (actif)
- choix 3.3 (actif)
- choix 3.3.1
- choix 3.3.2 (actif)
- choix 3.3.3
Choix 4

Les choix de base (1,2,3,4) peuvent être dans un menu horizontal si
nécessaire.

J'arrive très bien à faire ça avec CMS Made Simple, mais entre les
templates, la base de données et le moteur Smarty, j'ai du mal à
comprendre coment ça fonctionne :(

Un exemple étant plus parlant qu'un long discours, j'aimerais obtenir un
fonctionnement similaire à ça :
http://www.opusinfide.com/
http://www.opusinfide.com/evenements/soiree-2011-a-l-a-c-f.html

Inutile de dire que si je fais appel à vos lumières, c'est parce que je
n'ai rien trouvé de concluant et que le client couine...

J'ai bien des idées sur comment programmer le truc, mais ça va me
prendre pas mal de temps, j'ai trois mois de retard alors s'il est
possible de ne pas réinventer l'eau tiède et de m'éviter qu'il ne
m'envoie des tueurs...

Par avance merci.

--
Eric

5 réponses

Avatar
SAM
Le 13/03/12 17:38, Eric Demeester a écrit :

Bonjour à toutes et à tous,

Il y a longtemps que je n'avais pas fait appel à vos lumière, mais là je
coince...

J'ai besoin, sur un site que je dois pour diverses raisons développer à
100% à la mimine, d'avoir un menu contextuel sur la gauche, et je
patauge un peu.

En gros, disons qu'à la base j'ai :



ne pas oublier de mettre une page aussi pour les choix principaux

Choix 1
Choix 2



doit mener à une page où on trouvera le menu choix 2.1 et 2.2

- Choix 2.1
- Choix 2.2
Choix 3
- choix 3.1
- choix 3.2
- choix 3.3
- choix 3.3.1
- choix 3.3.2
- choix 3.3.3
- choix 4

etc.



bon ! ne serait-ce pas :

<ul id="menu">
<li><a href="1.htm">choix 1</a></li>
<li><a href="2.htm">choix 2</a>
<ul>
<li><a href="21.htm">choix 2.1</a></li>
<li><a href="22.htm">choix 2.2</a></li>
</ul>
</li>
<li
<li
</ul>

en indiquant que c'est Choix 2 -> Choix 2.1 qui est actif, donc.



La seule réelle complication est IE,
voir comment Stu règle ça à grand renfort de commentaires conditionnels
(méthode à la pur MinusculeMou !)

<http://www.cssplay.co.uk/menus/dd_valid.html>

et en vertical :
<http://www.cssplay.co.uk/menus/multi-line-flyout.html>
(par exemple et parmi une multitude)


En veux-tu en voilà et n'en jetez plus merci !
<http://www.cssplay.co.uk/menus/>

--
Stéphane Moriaux avec/with iMac-intel
Avatar
Eric Demeester
dans (in) fr.comp.infosystemes.www.auteurs, SAM
ecrivait (wrote) :

Bonjour Stéphane,

Tout d'abord un grand merci pour ta réponse. Sans m'apporter de réelle
solution, elle m'a bien éclairci les idées :)

ne pas oublier de mettre une page aussi pour les choix principaux



Ce sera la page d'accueil (voire en répétition sur toutes les pages),
avec un menu horizontal agrémenté éventuellement de la possibilité
d'accéder directement à tel ou tel sous menu, comme dans l'exemple que
je citais :
http://www.opusinfide.com/

> Choix 2
doit mener à une page où on trouvera le menu choix 2.1 et 2.2



Oui. L'exemple choix 3 est peut-être plus parlant vis à vis de ce que je
souhaite faire. Je sélectionne choix 3 dans le menu principal, et dans
le menu de gauche j'ai comme options possibles :

> - choix 3.1
> - choix 3.1.1
> - choix 3.1.2
> - choix 3.1.3
> - choix 3.2
> - choix 3.3
> - choix 3.3.1
> - choix 3.3.2
> - choix 3.3.3



Dans un premier temps, je ne veux voir que :

- choix 3.1
- choix 3.2
- choix 3.3

comme ici :
http://www.opusinfide.com/projets-soutenus.html

Si je clique sur choix 3.2, je ne veux voir que :

- choix 3.1
- choix 3.2
- choix 3.2.1
- choix 3.2.2
- choix 3.2.3
- choix 3.3

comme ici :

http://www.opusinfide.com/projets-soutenus/association-les-p-tits-cracks.html

bon ! ne serait-ce pas :



C'est. Je maîtrise la syntaxe, mon problème étant de rendre visibles ou
invisibles les menus et sous-menus en fonction du contexte (de la page
sur laquelle je suis) et de la « profondeur » dans l'arborescence.

Je peux bien entendu tout écrire à la main, je sais faire, mais l'idée
est de contruire quelque chose de plus générique, en stockant l'ensemble
de mes menus et sous-menus dans un fichier externe, afin de pouvoir en
ajouter ou en supprimer aisément, eux et les pages associées. Là, ça se
complique ;)

> en indiquant que c'est Choix 2 -> Choix 2.1 qui est actif, donc.



Ça, je réfléchis en même temps que je réponds, je dois être capable de
le programmer en php. Je vais peut-être écrire une usine à gaz, mais une
fois que ce sera fait, elle sera réutilisable à l'infini :)

La seule réelle complication est IE,



Je sais berner IE, au moins à partir de la version 6. En dessous, j'ai
renoncé, l'interprétation des CSS est trop exotique.

Je vais regarder attentivement les exemples que tu cites.

Encore un grand merci pour ta réonse.

--
Eric
Avatar
SAM
Le 14/03/12 14:20, Eric Demeester a écrit :
dans (in) fr.comp.infosystemes.www.auteurs, SAM
ecrivait (wrote) :

Bonjour Stéphane,

Tout d'abord un grand merci pour ta réponse. Sans m'apporter de réelle
solution, elle m'a bien éclairci les idées :)



Je ne pense pas avoir bien saisi toute l’ampleur de la question !!

un menu horizontal agrémenté éventuellement de la possibilité
d'accéder directement à tel ou tel sous menu, comme dans l'exemple que
je citais :
http://www.opusinfide.com/



Ça a l'air de fonctionner JS désactivé.

donc celui-là est exactement ce dont à propos de quoi je causais
ul
li a menu1
ul
li a menu 1.1
li a menu 1.2
li a menu 1.2
/ul
/li
li a menu2
/li
...etc


Dans un premier temps, je ne veux voir que :

- choix 3.1
- choix 3.2
- choix 3.3

comme ici :
http://www.opusinfide.com/projets-soutenus.html



OK

Si je clique sur choix 3.2, je ne veux voir que :

- choix 3.1
- choix 3.2
- choix 3.2.1
- choix 3.2.2
- choix 3.2.3
- choix 3.3

comme ici :

http://www.opusinfide.com/projets-soutenus/association-les-p-tits-cracks.html



Ha!? ce menu-là à gauche ! ! !

bon ! ne serait-ce pas :



C'est. Je maîtrise la syntaxe, mon problème étant de rendre visibles ou
invisibles les menus et sous-menus en fonction du contexte (de la page
sur laquelle je suis) et de la « profondeur » dans l'arborescence.



ben ... pour ce qui est du menu de gauche, son code html est chaque fois
différent suivant que tu es sur les pages :
Projets soutenus : <http://www.opusinfide.com/projets-soutenus.html>
P'tis Cracks :
<http://www.opusinfide.com/projets-soutenus/association-les-p-tits-cracks.html>
L'école :
<http://www.opusinfide.com/projets-soutenus/fondation-pour-l-ecole.html>

Ça m'a l'air essstrèmement compliqué à maintenir c't'affaire !

Je peux bien entendu tout écrire à la main, je sais faire, mais l'idée
est de contruire quelque chose de plus générique, en stockant l'ensemble
de mes menus et sous-menus dans un fichier externe, afin de pouvoir en
ajouter ou en supprimer aisément, eux et les pages associées. Là, ça se
complique ;)



Surtout quand on regarde la petite ligne ajoutée :

Vous êtes ici : Projets soutenus » Association Les P'tits Cracks » Dons
et mécénat

le programmer en php.



chez eux c'est suffixé en html
mais ... peut-être ont-ils rerouté le php ou l'asp sur l'html ?

Je vais peut-être écrire une usine à gaz, mais une
fois que ce sera fait, elle sera réutilisable à l'infini :)

La seule réelle complication est IE,



Je sais berner IE, au moins à partir de la version 6. En dessous, j'ai
renoncé, l'interprétation des CSS est trop exotique.



On dirait bien qu'eux en ont fait l'impasse (et même peut-être du IE.6?)
sauf à ce qu'il le berne par le biais de JS ?
"modules/MenuManager/CSSMenu.js"

Je vais regarder attentivement les exemples que tu cites.



et peut-être demander à benoit duchatelet comment il a fait ?
<http://www.opusinfide.com/uploads/images/Gallery/trombinoscope/Benoit-Duchatelet.jpg>


--
Stéphane Moriaux avec/with iMac-intel
Avatar
Eric Demeester
dans (in) fr.comp.infosystemes.www.auteurs, SAM
ecrivait (wrote) :

Juste sur ce point :

et peut-être demander à benoit duchatelet comment il a fait ?
<http://www.opusinfide.com/uploads/images/Gallery/trombinoscope/Benoit-Duchatelet.jpg>



Euh, c'est moi qui ai configuré ça (et tout le site), pas Benoît. Enfin
quand je dis « configuré », je me suis contenté d'utiliser Cms Made
Simple et des greffons adéquats en fonction de mes besoins.

Après, c'est le moteur php et Smarty qui ont fait le boulot.

J'espérais un script miracle, mais je pense que je ne vais pas couper à
l'écriture d'une usine à gaz en php pour obtenir ce que je veux dans le
menu de gauche :(

--
Eric
Avatar
SAM
Le 15/03/12 15:03, Eric Demeester a écrit :
dans (in) fr.comp.infosystemes.www.auteurs, SAM
ecrivait (wrote) :

Juste sur ce point :

et peut-être demander à benoit duchatelet comment il a fait ?
<http://www.opusinfide.com/uploads/images/Gallery/trombinoscope/Benoit-Duchatelet.jpg>



Euh, c'est moi qui ai configuré ça (et tout le site), pas Benoît.



et il ne t'a rien dit pour la grosse faute :
« Les croisements de personnalités qu'ils mettaient en contact »
^^^^^^^^^^^^^
??
ici :
<http://www.opusinfide.com/le-bureau-benoit-duchatelet-solange-doumic.html>

Enfin
quand je dis « configuré », je me suis contenté d'utiliser Cms Made
Simple et des greffons adéquats en fonction de mes besoins.



et c'est comme ça qu'on arrive à des multiples mêmes id sur même page
id="rot_img4f63040420cbf"
... ?
(dans div rotation-trombi)

Après, c'est le moteur php et Smarty qui ont fait le boulot.



d'où le style border=0 ??
style="display:none; position:absolute; top:0; left:0; border=0;"


J'espérais un script miracle, mais je pense que je ne vais pas couper à
l'écriture d'une usine à gaz en php pour obtenir ce que je veux dans le
menu de gauche :(



Déjà à la main et page par page ça doit être assez casse tête !
alors ... un automatisme ... d'ici qu'il soit réalisé (si toutefois
c'est possible) le site aura été remanié moult fois, non ?


M'enfin ... si tu arrives à créer la petite ligne :
Vous êtes ici : Événements » Soirée 2010 à l'Interallié » Photos : album 3
il ne doit pas être très compliqué d'extraire du tableau des menus
celui des événements
et d'en montrer actifs ceux relatifs à "Soirée 2010"

--
Stéphane Moriaux avec/with iMac-intel