Javascripts

RIGHT CLICK MENU

Adesso imparerete a creare un menu che si apre col tasto destro del mouse. Un esempio lo trovate in queste pagine, basta cliccare col tasto destro.

-ENG- Now you will learn how to create a right click menu, similar to the one of my pages.

Prima di tutto copiate la prima parte del codice e incollatela tra <head> e </head>. Per selezionarlo tutto clicca e fai ctrl+5.

-ENG- First copy this part of the code and paste it between <head> and </head>. To select it all click and press ctrl+5.

Ora potete configurare le caratteristiche "fisiche" del vostro menu cambiando i dati alle voci "width", "border", "background-color", "font-family" ecc. non cambiate la voce "visibility".

Quindi copiate la seconda parte e incollatela dopo <body>.

-ENG- Now you can configure your menu changing the width, borders etc. Do not change the voice "visibility".

Then copy the second part and paste it after <body>.

<div id="ie5menu" class="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)" display:none> <div class="menuitems" url="YOUR URL">NAME</div> <div class="menuitems" url="YOUR URL" >NAME</div> </div> <script language="JavaScript1.2"> //set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar var display_url=0 var ie5=document.all&&document.getElementById var ns6=document.getElementById&&!document.all if (ie5||ns6) var menuobj=document.getElementById("ie5menu") function showmenuie5(e){ //Find out how close the mouse is to the corner of the window var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<menuobj.offsetWidth) //move the horizontal position of the menu to the left by it's width menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth else //position the horizontal position of the menu where the mouse was clicked menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX //same concept with the vertical position if (bottomedge<menuobj.offsetHeight) menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight else menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY menuobj.style.visibility="visible" return false } function hidemenuie5(e){ menuobj.style.visibility="hidden" } function highlightie5(e){ var firingobj=ie5? event.srcElement : e.target if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){ if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node firingobj.style.backgroundColor="highlight" firingobj.style.color="white" if (display_url==1) window.status=event.srcElement.url } } function lowlightie5(e){ var firingobj=ie5? event.srcElement : e.target if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){ if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node firingobj.style.backgroundColor="" firingobj.style.color="black" window.status='' } } function jumptoie5(e){ var firingobj=ie5? event.srcElement : e.target if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){ if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode if (firingobj.getAttribute("target")) window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target")) else window.location=firingobj.getAttribute("url") } } if (ie5||ns6){ menuobj.style.display='' document.oncontextmenu=showmenuie5 document.onclick=hidemenuie5 } </script>

Quindi sostituite l'URL del comando che volete inserire nel menu, dove è scritto YOUR URL e il nome del comando che comparirà nel menu dove è scritto NAME. Potete aggiungere tanti comandi quanti volete, poichè l'altezza varia automaticamente. Se volete che la pagina su cui si clicca appaia in un'altra finestra dovete aggiungere il comando target="newwin", ad es:

-ENG- Then change the URL you want and the NAME for the Url into the menu. Adding target="newwin" you will cause a download into nother window. This is an example:

<div class="menuitems" url="YOUR URL" target="newwin">NAME</div>

you can add as many div as you want.

Source: Dynamic Drive