begin process at 2012 05 28 11:25:52
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Menu & Co

 >  MENU POUR CLICK DROIT COMPATIBLE MOZILLA & IE

MENU POUR CLICK DROIT COMPATIBLE MOZILLA & IE


 Information sur la source

Note :
8,5 / 10 - par 4 personnes
8,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Niveau :Initié Date de création :21/06/2004 Vu / téléchargé :9 100 / 713

Auteur : piedpierre

Ecrire un message privé
Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note

 Description

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

Source

  • 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()'>")
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...

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

3 PETITES FONCTIONS POUR GERER VOS FRAME FRAMES
Source avec une capture SELECTEUR DE FICHIER SIMPLE

 Sources de la même categorie

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec Zip FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41
Source avec Zip Source avec une capture TREEMENU-2.3.6-MACNIP par neep
Source avec Zip Source avec une capture MENU CIRCULAIRE par adelmonis
Source avec Zip Source avec une capture MENU TASKBAR WINDOWSXP HOME par micking

Commentaires et avis

Commentaire de chmel le 23/06/2004 11:01:10

techniquement c'est un script interressant et bien construit. Le mieux aurait été de d'abord respecter les standards :
- 2fois la balise body
- utilisation de &lt;div url="adresse du lien" au lieu de &lt;a href="adresse du lien". Cela aurai permis de supprimer les fonctions menu_over(),menu_out() et menu_clic() inutiles dans ce cas.

En temps qu'utilisateur, je boycote le site qui usurpe mon menu contextuel du clic droit.

Commentaire de daeron le 01/10/2004 10:43:22

tres bon code mais si je peux me permettre, evite de tout ecrire sur une ligne c est penible a lire :-(
avec 2-3 vrais commentaires cela aurait ete parfait...

En tout cas ca marche bien sous IE, bravo.

Commentaire de adam06 le 28/10/2004 23:12:39

Chmel, vient pas sur mon site alors :D !
Je vais le mettre deès demain, il est vraiment bien ;)


Et une bonne note pour l éléve piedpierre !

Commentaire de cabolove le 20/12/2004 23:43:41

ca marche sous firefox, mais sous ie j'ai le menu contextuel d'ie qui s'affiche en meme temps. Comment desactiver ce dernier pour ne garder que le menu personnalisé?

Commentaire de piedpierre le 21/12/2004 06:53:18

on doit pouvoir ajouter un return false a la fin de la fonction afficher menu.

Commentaire de cabolove le 21/12/2004 11:14:08

ou exactement, afin que je fasse un test (ie 6)

Commentaire de Shibo_Sources le 28/06/2005 00:33:52

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

Commentaire de piedpierre le 30/09/2005 01:18:03

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..

Commentaire de vadech le 13/11/2005 20:22:10

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.

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,151 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales