menu pour click droit compatible mozilla & ie

Soyez le premier à donner votre avis sur cette source.

Vue 10 567 fois - Téléchargée 778 fois

Description

le même que celui de GuilleW 16394 mais avec prise en charge Mozilla

Source / Exemple :


document.write("<style>h3{COLOR:'#555555'; font: 11px 'Trebuchet MS', Tahoma, Geneva, Arial, Helvetica, sans-serif;} #mleft{COLOR: #0FB000; text-align:center; float:left; width:132px; margin-bottom:2px;} .cbar h3{font-weight:bold; background-image:url(mimg/mh.gif); background-position: top left; margin:0px 3px;text-align:left; padding: 9px 8px 3px 8px; line-height:13px;} .cbar .box {background-image:url(mimg/mb.gif); background-position:bottom left; background-repeat:no-repeat; margin:0px 3px 3px 3px; text-align:left; width:126px; padding-bottom:5px; overflow:hidden;} ul.menu li{background-image:url(mimg/mp.gif); background-repeat: repeat-x; padding: 3px 3px;} ul.menu li div{background-image: url(mimg/mg.gif); background-position: 0px 5px; background-repeat: no-repeat; padding-left: 9px; margin-left:3px; line-height:14px;} UL {margin: 0 5px; list-style-type: none;}</style>")
var mavar='?mavar='; // est ajouté comme variable GET à toute page appelée le contenu est spécifié ligne 17 & 18 par défaut la valeur de l'url
var mavar2='?mavar2=monurl';// Sert si vous voulez ajouter une variable à l'adresse(voir dans div)
var n=new Boolean();if(navigator.appName=='Netscape'){n=true;}else{n=false;} // Netscape(Mozilla) ou IE par défaut
function afficher_menu(e){
 if(n){gauche=e.pageX;if(window.innerWidth-e.pageX<document.getElementById('m').offsetWidth){gauche-=document.getElementById('m').offsetWidth;}
	haut=e.pageY;if(window.innerHeight-e.pageY<document.getElementById('m').offsetHeight){haut-=document.getElementById('m').offsetHeight;if(haut<0){haut=5}}
	with(document.getElementById('m').style){left=gauche; top=haut; visibility='visible';}}
 else{gauche=document.body.scrollLeft+event.clientX;if(document.body.clientWidth-event.clientX<m.offsetWidth){gauche-=m.offsetWidth;}
	haut=document.body.scrollTop+event.clientY;if(document.body.clientHeight-event.clientY<m.offsetHeight){haut-=m.offsetHeight;if(haut<0){haut=5}}
	with(m.style){left=gauche; top=haut; visibility='visible';}}return false;}
function cacher_menu(){if(n){document.getElementById('m').style.visibility='hidden';}else{m.style.visibility='hidden';}}
function menu_over(e){if(n){if(e.target.className=='rub'){with (e.target.style){color='#0FBFFF';}window.status=e.target.getAttribute('url'); }}
 else{if(event.srcElement.className=='rub'){with (event.srcElement.style){color='#0FBFFF';}status=event.srcElement.url; }}}
function menu_out(e){if(n){if(e.target.className=='rub'){with (e.target.style){color='#0FB000';}window.status='';}}
 else{if(event.srcElement.className=='rub'){with(event.srcElement.style){color='#0FB000';}status='';}}}
function menu_click(e){if(n){if(e.target.className=='rub'){location=e.target.getAttribute('url')+mavar+e.target.getAttribute('url');}}
 else{if(event.srcElement.className=='rub'){location=event.srcElement.url+mavar+event.srcElement.url;}}}
document.oncontextmenu=afficher_menu;document.onmouseover=menu_over;document.onclick=menu_click;document.onmouseout=menu_out;
document.write("<div id='m' style='position: absolute; visibility: hidden; width:126px; cursor: default; font: menu;'><div id='mleft' class='cbar'> <h3> :: Menu  ::</h3><div class='box'><ul class='menu'><li><div class='rub' url='javascript:history.go(-1)'> Précédent </div><div class='rub' url='javascript:history.go(1)'> Suivant </div><div class='rub' url='javascript:history.go(0)'> Actualiser </div></li><li><div class='rub' url='accueil.php'>Accueil</div><div class='rub' url='lienvariable.htm"+mavar2+"'>lien variable</div></li><li><div class='rub' url='galerie.htm'>Les Galeries Photos</div><div class='rub' url='salle.htm'>La Salle D'Armes</div><div class='rub' url='video.htm'>Les Videos</div> <div class='rub' url='intro.htm'>Intro du Spectacle</div></li><li><div class='rub' url='news.htm'>Les News</div><div class='rub' url='stage.htm'>Les Stages</div></li><li><div class='rub' url='formulaire.htm'>Ecrivez-Nous . . .</div><div class='rub' url='livre.htm'>Le Livre d'Or</div><div class='rub' url='liens.htm'>Les Liens Simpas</div></li></ul></div></div></div><body onClick='cacher_menu()'>")

Conclusion :


Sauvez le script çi dessus sous mimg/mdroitnet.js

et dans le BODY de votre page ajoutez :

<script src=mimg/mdroitnet.js></script>

Attention les images de fonds sont dans le zip aussi il est nécéssaire de télécharger le zip si vous n'avez pas la version deGuilleW (source16394) car sinon le résultat serait decevant.. Alors bien sur Netscape affiche le div comme il veut mais si vous avez des améliorations n'hésitez pas... je bosse actuellement pour pouvoir l'afficher sur des éléments précis de la page mais j'y arrive pas...

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
8
Date d'inscription
jeudi 30 septembre 2004
Statut
Membre
Dernière intervention
13 novembre 2005

Slt
merci pour ce sript
je compte l'utitiliser moi aussi mais je n'arrive pas à le faire fonctionner pour mon cas.
Je suis arrivé aàle faire fonctionné sur le oncontextmenu.
J'aimerais que le menu s'ouvre lorsque je clique droit sur une image et que les liens présent dans le div soit modifié grace à ta variable mavar en fonction de l'image cliquée.
J'ai vu que tu a dejà répondu a cette question mais je ne comprend pas tres bien.
Je suis debutant en Javascript, dsl, lol.
Merci d'avance.
Messages postés
29
Date d'inscription
jeudi 29 avril 2004
Statut
Membre
Dernière intervention
20 février 2007

oui, c'est possible, il faut initialiser des variables globales(hors-fonctions) dans lesquelles ont va stocker à chaque affiche_menu
les valeurs à conserver par l'utilisation du gestionnaire d'évènement javascript qui diffère selon les navigateurs...
lienclicke="";

ensuite dans affiche_menu(e){
var e=n'e:window.event;var tg=(e.target)?e.target:e.srcElement;
lienclicke=getattrib_p(tg,"href");
// donc on a e=évenement et tg= la cible(target) ensuite par rapport à cette target, on récupère ce qu'on veut de la balise clickée :
// par e.getAttribute();2 fonctions pour récupérer un élément précis récursivement jusqu'à son plus proche "parent"(max jusqu'au 10eme parent) qui contient
// cet attribut. On peut récuperer tout les attributs(class,target,src,style,width,etc...).
// ses fonctions ne sont pas super parfaites mais elle ont l'avantage de fonctionner vu que je suis pas un super pro du javascript, toutes
// améliorations sont bienvenues si elles fonctionne mieux...
function getattri(e,elt){if(!n && elt=="class"){elt="className";}
if(e.getAttribute(elt)!=false){return e.getAttribute(elt);}
else if(e.parentNode!=false){return getattri(e.parentNode);}else{return 1;}}

function getattrib_p(e,elt){var i=getattri(e,elt),j=0;while(i==null&&j<10){i=getattri(e.parentNode.parentNode,elt);j++;}return i;}

// Toujours compatible ie et mozilla..
Messages postés
18
Date d'inscription
dimanche 2 janvier 2005
Statut
Membre
Dernière intervention
3 août 2008

Jadore tout simplement et je serai vraiment tres interessé si il y a moyen d'appeler le menu sur un element précis (un lien pour etre exact) donc tiens nous au courant
Messages postés
3
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
25 août 2006

ou exactement, afin que je fasse un test (ie 6)
Messages postés
29
Date d'inscription
jeudi 29 avril 2004
Statut
Membre
Dernière intervention
20 février 2007

on doit pouvoir ajouter un return false a la fin de la fonction afficher menu.
Afficher les 9 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.