Zibaldone.it - Rubriche \ Corso di HTML

How To a cura di: www.wmportal.it

Come creare un menu attivabile col pulsante destro del mouse.

Una delle più gradevoli novità portate da Internet Explorer 5 è indubbiamente quella di poter far apparire un menu contestuale personalizzato in luogo di quello predefinito.

Clicca col pulsante destro del mouse in un punto qualunque di questa pagina e vedrai che il menu è diverso da quello che ti appare di solito.

Lo script è diviso in due porzioni: questa che segue è la parte da mettere tra i tags <HEAD> ed </HEAD> della tua pagina:

#ie5menu{
position:absolute;
width:200px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
visibility:hidden;
}

.menuitems{
padding-left:15px;
padding-right:15px;
}
-->
</style>

function showmenuie5(){
var rightedge=document.body.clientWidth-event.clientX
var bottomedge=document.body.clientHeight-event.clientY

if (rightedge<ie5menu.offsetWidth)
ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth
else
ie5menu.style.left=document.body.scrollLeft+event.clientX

if (bottomedge<ie5menu.offsetHeight)
ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight
else
ie5menu.style.top=document.body.scrollTop+event.clientY

ie5menu.style.visibility="visible"
return false
}

function hidemenuie5(){
ie5menu.style.visibility="hidden"
}

function highlightie5(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor="highlight"
event.srcElement.style.color="white"
if (display_url==1)
window.status=event.srcElement.url
}
}

function lowlightie5(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor=""
event.srcElement.style.color="black"
window.status=''
}
}

function jumptoie5(){
if (event.srcElement.className=="menuitems")
window.location=event.srcElement.url
}
</script>

Quest'altra parte, invece, la puoi mettere in un punto qualunque all'interno del <BODY>:

Configurare lo script è semplicissimo. Lasciando invariata la parte posta tra i TAGs <HEAD> ed </HEAD>, puoi facilmente aggiungere tutti i "menuitems" che vuoi separandoli, all'occorrenza, con un <HR> o aggiungendo, se vuoi, una piccola icona che distingua le varie voci.

CorsoHTML
di Francesco Ricca