MENU CONTEXTUEL EN CASCADE GÉNÉRÉ DYNAMIQUEMENT, UTILISANT LES CSS, COMPATIBLE I
nico606
Messages postés
270
Date d'inscription
mercredi 5 novembre 2003
Statut
Membre
Dernière intervention
11 septembre 2004
-
1 août 2004 à 11:55
LUDINSKI Messages postés 441 Date d'inscription mardi 2 décembre 2003 Statut Membre Dernière intervention 22 mai 2012 - 9 sept. 2007 à 11:35
LUDINSKI Messages postés 441 Date d'inscription mardi 2 décembre 2003 Statut Membre Dernière intervention 22 mai 2012 - 9 sept. 2007 à 11:35
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/25023-menu-contextuel-en-cascade-genere-dynamiquement-utilisant-les-css-compatible-ie-et-netscape
https://codes-sources.commentcamarche.net/source/25023-menu-contextuel-en-cascade-genere-dynamiquement-utilisant-les-css-compatible-ie-et-netscape
9 sept. 2007 à 11:35
Merci pour tes encouragements...
Pour ton soucis d'url, j'ai une solution mais il faut faire un menu par image... ( désolé ) :
Au lieu d'utiliser item.SetURL(...), utilises plutôt SetFunction(...)
Et lorsque la fonction est appelée (donc lorsque l'item est cliquée), tu récupères, dans le paramètre indexItem, la partie situé avant le premier '_' qui correspond à l'indice du menu.
Donc d'après cet indice, tu sauras qu'elle image est concernée.
Autrement, n'hésites pas à modifier le code du menu pour l'adapter à ton traitement... si tu trouves une façon de n'utiliser qu'un seul menu, je suis preneur ;)
Merci encore et bon courage
7 sept. 2007 à 16:25
Maintenant l'inevitable question.
J'ai un certain nombre d'images sur ma page, pour chacune j'affiche ton menu contextuel avec 2 items.
Le 1er est une url qui me permet d'ouvrir l'image dans un autre page php et cela fonctionne très bien, mon souci est que je voudrais pouvoir passer un argument pour cette page php qui soit different selon l'image choisi.
J'espère voir été clair, et je te remercie d'avance de ta réponse.
24 oct. 2006 à 02:09
Alors maintenant petit souci personnel. Je voudrais l'intégrer dans un système de multi-fenêtrage genre OS Javascript.
J'utilise le script WinLike qui est visible ici http://www.winlike.net pour le multi-fenêtrage dans une seule fenêtre de navigateur.
Premier souci, l'interfacage. WinLike est compatible IE et Firefox et ton menu également.
Lorsque j'utilise ton menu dans une des fenêtres de WinLike :
- avec IE le scroll de cette fenêtre n'est pas détecté et le menu contextuel est décalé vers le haut comme l'un des bugs detecté avec Firefox (leeoon le 15/01/2005 13:58:56)
- avec FireFox la console Javascript me dit "Erreur d'analyse de la valeur pour la propriété « left ». Déclaration abandonnée." pour chaque clic droit appelant le menu et il se retrouve en bas de la page (en dernier élément de la page je suppose)
Je n'ai pas encore analysé le code de winlike pour la simple et bonne raison qu'il l'ont passé dans une moulinette qui le rend illisible pour tout être humain normalement constitué, téléchargez-le c'est assez rigolo à voir tout les variables sont de simples lettres de l'alphabet et tout le code n'est qu'une seule ligne énorme !! sic !! Ca c'est de la protection de propriété intellectuelle pas mal. On peut l'utiliser mais on ne peut l'adapter.
Second souci. Toujours dans l'idée de faire un truc genre OS, je voudrais utiliser ton menu pour quelquechose qui ressemble au bouton Démarrer de Windows. Sauf que tu bloque le clic gauche de tout le document pour l'usage de ton menu.
Dans la méthode :
- function MenuContext_Start( menuForPage )
Si je désactive la ligne :
- document.onclick = OnSelect
Je récupère le clic gauche mais ton menu devient inopérant en mode contextuel et je n'ai pas testé plus loin les fonctionnalités.
Solution alarache copier-coller le code dans un nouveau fichier .js en changeant le nom des méthodes. Mais je ne l'ai pas encore fait et c'est du coding de barbare. Il serait peut être possible d'imaginer un paramètre supplémentaire dans le lancement du menu ou une seconde méthode pour l'utiliser en mode clic gauche.
Si tu as une idée pour ce petit upgrade ce serait cool. Au pire je devrais m'y pencher dessus dans quelques temps. Et si je trouve un truc je l'enverrais à LUDINSKI
26 sept. 2006 à 18:01
En théorie ca ne devrait absolument rien changer d'utiliser le script dans une page asp, j'ai du commetre une erreur. Tant pis j'ai fait un autre menu Javascript plus simple (et beaucoup moins bien également) qui suffit pour ce que j'avais à faire.
Mais faudra que je passe du temps à trouver ou ça coince maintenant que je suis un peu plus expérimenté.
25 sept. 2006 à 11:59
je tout d'abord je veut te dire un grand bravo pour le travail que tu a fait la c'est vraimment genial comme menu malgrée le fait que tu etait un debutant a ce moment , mais je voudrait te poser une question si tu veut bien
j'aimerai savoir comment executer un menu estétiquement identique mais a la fois different au niveau du contenu lorsque je click sur une image differente je te serait vraiment tres reconnaissant de me venir en aide SVP
Merci Ludinski et encore beau boulot
11 sept. 2006 à 19:06
11 sept. 2006 à 10:10
Je n'est jamais essayé de l'insérer dans une page ASP. C'est certainement faisable mais je n'ai aucune idée de la façon de procéder... désolé :(
Pour la démo, le zip contient quelques exemples en html, mais pour une utilisation plus concrète tu peux aller voir ici :
http://leon3d.free.fr
11 sept. 2006 à 08:59
Merci
15 mai 2006 à 10:25
Es-ce normale que je ne puisse pas l'utiliser dans une page asp alors que le même script fonctionne très bien dans une page html? (erreur dans Menu.js ligne 252...)
23 mai 2005 à 18:20
J'ai peut être bien une solution, je vais m'y mettre ce soir et (avec de la chance), je ferai une mise à jour demain.
J'ai publier, une source (TOOL TIP...) et j'ai était confronté à un problème équivalent, bref, si tu as le temps de jeter un oeil !
3 mai 2005 à 12:02
Merci
3 mai 2005 à 10:58
Merci.
30 mars 2005 à 11:37
Je n'ai pas compris pourquoi supprimer les espaces et accents !
Sinon, ravi d'avoir pus t'aider !!
Bye
23 mars 2005 à 18:37
sacrée galère à installer pour un débutant,
il faudrait retirer les accents et les espaces dans le code.
Sinon :
- Explications, très bien,
- Documents joints, très bien,
- Personnalisation, très bien.
Donc, excellent menu pour initiés.
Merci beaucoup d'avoir fourni tant de W.
++
14 févr. 2005 à 08:38
Pour tout te dire, j'y avait déjà pensé, et ça ne devrait pas demander trop de boulot !!
Je ne vais d'ailleur pas tarder à remettre à jour les sources. J'ai détecté quelques maladresses dans mon code et j'ai ajouté deux méthodes (voir la doc...) ainsi qu'un exemple de menu au style XP (mais en fait, j'ai triché, tu verras).
Allez, sur ce, je doit taffer... Ciao
12 févr. 2005 à 22:45
La transparence à la tooltips serait un plus, une idée qui me travail : le menu contextuel est top, mais si le visiteur ne lit pas l'indique comme quoi il existe, ça devient peut utile.
Ton système de menu css est vraiment super souple, pourquoi dans ce cas ne pas offrir la possibilité, plus recherchée qu'un menu contextuel, de faire un simple menu dynamique. En gros il suffirait que le menu le plus haut de la pile (le menu1), au lieu de s'afficher comme menu contextuel, puisse être affiché à un endroit de la page en permanence.
comme dans cet exemple :
http://www.editeurjavascript.com/scripts/scripts_navigation_1_120.php
Penses-tu que c'est réalisable ?
Sans empècher l'utilisation du menu contextuel, ça augmenterais considérablement les possibilités...
merci encore pour ton boulot formidable.
Léon
11 févr. 2005 à 16:40
Maintenant le padding des classes de style est pris en compte (même sous IE) :
Il m'a fallut 'emballer' les items dans un DIV, parce que les tableaux sous IE ne prennent pas le padding en compte... zarbi ?!
Je vais peut-être m'intéresser à la transparence. (à voir !! )
Have fun, Ciao
3 févr. 2005 à 08:29
Pour ce qui est du padding, je n'avais pas fait attention (donc merci !!) je n'sais pas encore comment le gérer, mais pour l'instant je te conseil de mettre 0px pour les styles des items et 1px pour les menus
Pour ajouter un menu à une image, il faut lui mettre un id, puis intercepter l'évènement 'oncontextmenu' pour ça, tu peut utiliser la fonction GetElement(), ce qui donne :
GetElement( "imageID" ).oncontextmenu = FonctionName
Ensuite, dans la fonction 'FonctionName' tu affiche le menu :
function FonctionName( evenementSouris )
{
return ShowMenu( evenementSouris )
}
le fait de mettre 'return' avant la fonction 'ShowMenu' permet de ne pas afficher le menu contextuel du navigateur et la variable 'evenementSouris' est nécessaire pour les navigateurs Netscape !!
Voilà, j'espère que tu arrivera à tes fins.
N'hésites pas, si tu as un problème.....
Ciao
2 févr. 2005 à 16:30
Les icônes c'est top (faut que je m'en fasse) et en plus les flèches sont maintenant au même niveau que le texte.
Petites remarques tout de même : le css n'est plus interprété de la même façon. Par exemple iexplorer ne tient plus compte des padding-top, padding-bottom, padding-right et padding-left.
Si je veux ajuster la hauteur des items je suis obligé de bidouiller en ajoutant une icône à la taille désirée.
Voilà, sinon ce matin j'ai essayé de faire marcher le menu en cliquant avec le bouton gauche sur une image sans succès. Aurais-tu quelques pistes pour ça, ou pour afficher un menu tel que :
http://www.editeurjavascript.com/scripts/scripts_navigation_1_120.php
ça serait super.
La doc est très bien, ça complète les page d'exemple.
merci encore pour ton super travail.
2 févr. 2005 à 08:39
On peut mettre une image devant chaque item.
Comme promis, j'ai ajouté une doc. dans laquelle j'explique quelles sont les ID utilisées par le menu, ainsi que comment ajouter un séparateur et bien d'autre choses...
Pour l'opacité, c'est une bonne idée, mais pas si simple à mettre en place. Mais je ne vais pas bloquer là-dessus (ce serai trop bête !!).
Ciao à tous
27 janv. 2005 à 14:02
Pour les ToolTips, j'ai également fait une mise à jour pour qu'il s'affiche plus vite et j'ai corrigé un bug qui empêchait d'en affecter un, à un élément situé dans un conteneur !!
Si tu veux jeter un oeil...
Pour les images du menu, je ne pense pas faire de mise à jour avant la semaine prochaine... j'ai beaucoup de boulot !
En tous cas merci encore pour tes encouragements.
Ciao
27 janv. 2005 à 12:48
Pour la peine j'ai caché un menu bonus dans mon menu
Offrir la possibilité de mettre des icons devant les items, voilà qui est une très bonne idée.
J'avais déja essayé d'en mettre à la place des flèches mais je ne pouvais pas sans un sous menu vide ou intégré à l'image de fond.
une idée à prendre ou à laisser : tu pourrais ajouter un effet léger effet d'opacité comme sur tes tooltips. Bien que ces dernier mettent trop longtemps à s'afficher à mon goût, sauf si on passe rapidement d'un élément à l'autre.
En tout cas c'est vraiment du super boulot,
merci encore
Léon
bon travail
26 janv. 2005 à 17:52
Je suis en train de travailler sur le fait de rajouter une image devant les items, c'est pas mal, mais ça créer quelques contraintes. Je vais donc accompagner les sources d'une petite doc explicative.
En espérant ne pas faire une "usine à gaz"...
A++
25 janv. 2005 à 21:31
background-image: url(fichier.jpg);
sauf que fichier.jpg est dans le même rep que Styles.css
merci d'avance pour la mise à jour de ton super menu.
25 janv. 2005 à 12:06
Léon,
Je voulais savoir : comment as tu fait pour mettre les images de fond ?
Parce que j'en ait mis une dans un des menus, mais sous Mozilla, elle ne s'affiche pas. Pourrais-tu me donner ta ligne CSS (s'il s'est bien le cas !!), voici la mienne :
background-image: url( file:///...FondMenu.jpg );
Autrement, je vais pas tarder à mettre les sources à jour.
20 janv. 2005 à 08:36
Sinon pour ton problème il y a une autre solution sans passer par les cookies (je n'y ais pas pensé tout de suite et pourtant c'est bidon), Tu peux passer des valeurs par l'URL....
Tu trouveras surement ton bonheur sur ce site !!
Ciao, Ludinski
19 janv. 2005 à 17:29
Pour le décalage de tableau à cette adresse il y a un menu (moins évolué que le tien) qui n’à pas ce problème.
http://www.editeurjavascript.com/scripts/scripts_navigation_1_113.php
Bonne continuation.
Léon
18 janv. 2005 à 11:42
Je vais faire des essais sur une variable STATIC mais...
J'en doute !!
18 janv. 2005 à 10:28
Une question : Comment penses tu qu'il serait possible de garder unr variable sur tout le site. Par exemple ici lorsque je modifie la variable Merci à toi,
Une question :
Comment penses-tu qu'il serait possible de garder une variable sur tout le site ?
Par exemple lorsque je modifie la variable "menuContext.ChangeMenuActif" sur une page et qu’elle ne se réinitialise pas en reloadant la page ou en passant à la page suivante.
En gros que je choisisse un menu et qu'il reste le même pour tout le site gâce à une variable globale.
Penses-tu que c’est faisable en Javascipt ou en utilisant un autre langage ?
J'ai d’abord penser à utiliser les cookies mais certains ne les acceptes pas.
Ne l\'étant pas du tout moi même, je fais appelle à tes talents de programmeur.
merci encore
Léon
"menuContext.ChangeMenuActif"
16 janv. 2005 à 14:03
J'ai réussi à réglé le problème sous IE mais.... C'est bien dommage.
Autrement, si tu trouve une solution sous Mozilla, n'hésite pas !! Je suis tout ouilles.
J'ai jeté un oeil sur ton site et .... bravo, IL EST BEAU TON MENU !!!! loool
Vraiment merci, un commentaire comme ça, Ca fait Plaiz
Ciao
15 janv. 2005 à 13:58
Merci beaucoup pour tes scripts, j'aime beaucoup le mastermind, les bulles info et ce menu contextuel.
Dommage que ce dernier est encore quelques pb sous mozilla. En particulier un que j'ai détecté : lorsque on utilise la barre de défilement puis le clic droit, le tableau est décalé d'autant que du défilement effectué par rapport à la soirisSalut Ludinski,
Merci beaucoup pour tes scripts, j'aime beaucoup le mastermind,
les bulles info et surtout ce menu contextuel qui est intuitivement personnalisable
grâce à l’architecture que tu as mis en place et l’utilisation du style css.
Dommage que ce dernier ait encore quelques pb sous mozilla.
En particulier un que j'ai détecté : lorsqu’on utilise la barre de défilement puis le clic droit,
le tableau est décalé par rapport à la souris d'autant que du défilement effectué.
Je l’ai utilisé sur mon site : leon3d.com
Merci encore et bravo !
Léon
10 janv. 2005 à 08:58
La solution est assez simple : lorsque l'utilisateur click sur un item, il suffit d'appeler une fonction dans laquelle tu modifie l'URL, explication :
Tu crée ton item :
menu.Add( "Item", "ItemDegrade", "OnFocus", "OnClick" )
* Item : Texte de ton item
* ItemDegrade : Style CSS de l'item
* OnFocus : Style CSS de l'item lorsqu'elle a le focus
* OnClick : Nom de la fonction appelée lors d'un click sur l'item
Dans la fonction "OnClick", tu changes l'URL
25 déc. 2004 à 00:24
G utilisé le premier menu (dégradé) pour refaire le menu de mon site, j'aimerais maintenant savoir comment attaché l'adresse d'un page à chak item.
Petite précision j connais rien en programmation, il me faudrait donc en gros ce qu'il y a ajouter et où..
Merci d'avance
12 août 2004 à 09:48
Mais j'te conseil de le mettre dans un .js et de l'importer dans ta page. Ce qui fait que tu auras tous ces fichiers à importer dans ta page :
- La feuille de style
<LINK REL="stylesheet" TYPE="text/css" HREF="Styles.css">
- Les sources du menu
<SCRIPT SRC="MenuContext.js"></SCRIPT>
<SCRIPT SRC="Menus.js"></SCRIPT>
<SCRIPT SRC="Items.js"></SCRIPT>
- La source qui crée ton menu
<SCRIPT SRC="ConstructionMenu.js"></SCRIPT>
Voilà, j'espère que ça répond à ta question.....
11 août 2004 à 21:54
Mais où on met le code dans la source de sa page ?
Merci de me répondre...
5 août 2004 à 12:16
Mais malheureusement, les styles "élaborés", tel que les dégradés, ne fonctionnent pas sous Nescape et donc c'est bcp moin beau :(
Je n'vais pas tarder à mettre le code à jour (juste le temps de le commenter !!)
Toutes les idées concernant les évolutions à apporter au menu sont les bienvenues !!
4 août 2004 à 10:50
Sinon, tu penses savoir quels sont les méthodes qui pose problèmes dans mon code ?
J'ai déjà modifié les parties où j'utilisait "document.all", mais il reste des incompatibilités !!
Merci d'avance.
3 août 2004 à 09:55
Désolé si tu t'es senti "agressé", c'était pas le but. En plus tu dis que tu veux y remédier afin que ce soit compatible ailleurs, et la je dis BRAVO, c'est à ça qu'on reconnait un bon programmeur.
@plus
3 août 2004 à 09:01
markachat,
Je sais bien que la portabilité est importante, mais je débute en javascrypt et je n'ai aucune idée des fonctions qui poses problèmes sur d'autres navigateurs ( sauf pour document.all !! )
De toutes façons, j'ai l'intention d'y remédier !!
Au fait, tu l'as testé sous quels navigateurs ?
2 août 2004 à 11:39
Quel dommage...
D'ailleurs, petite note négative, c'est pas malin de faire des codes sans tester leur portabilité sous d'autres exploreur.
Mais bon...
Bravo quand même.
1 août 2004 à 11:55