Colocar el siguiente script entre las etiquetas <head> y </head>
<SCRIPT language="JavaScript" type="text/javascript"><!--
function Asigna(id,propiedad,valor){
if(document.layers) eval('document.'+id+'.'+propiedad+'='+valor);
if(document.all) eval(id+'.style.'+propiedad+'='+valor);
if(!document.all&&document.getElementById)
eval('document.getElementById("'+id+'").style.'+propiedad+'='+valor);
}
var poX=0, poY=0, poD=0, poA=0, poaX=0, poaY=0;
function iniciaMenu(){
if(document.layers){
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
window.onMouseDown=pulsa;
window.onMouseMove=movimiento;
}
else{
document.oncontextmenu=pulsa;
document.onmousemove=movimiento;
document.onclick=ApagaMenu;
}
}
function ApagaMenu(){
Asigna('Menu','visibility','"hidden"');
}
function pulsa(pulsacion){
if((!document.all&&(pulsacion.which!=1))||(document.all&&(event.button!=1))){
posicionDelRaton(pulsacion);
Asigna('Menu','left',poX);
Asigna('Menu','top',poY);
Asigna('Menu','visibility','"visible"');
return false;
}
else{
if(document.layers){
if((poaX<poX||poaX>poX+document.Menu.document.width)||(poaY<poY||poaY>poY+document.Menu.document.height))
ApagaMenu();
}
return true;
}
}
function movimiento(movimiento2){
if(document.all){
poaX=event.x+document.body.scrollLeft;
poaY=event.y+document.body.scrollTop;
}
else{
poaX=movimiento2.pageX;
poaY=movimiento2.pageY;
}
}
function posicionDelRaton(e){
if(document.all){
poX=event.x+document.body.scrollLeft;
poY=event.y+document.body.scrollTop;
poD=document.body.offsetWidth-poX;
poA=document.body.offsetHeight-poY;
if(poD>0&&poD<Menu.offsetWidth)
poX=document.body.scrollLeft+event.x-Menu.offsetWidth;
else
poX=document.body.scrollLeft+event.x;
if(poA>0&&poA<Menu.offsetHeight)
poY=document.body.scrollTop+event.y-Menu.offsetHeight;
else
poY=document.body.scrollTop+event.clientY;
}
else{
poX=e.pageX;
poY=e.pageY;
poD=window.innerWidth-poX;
poA=window.innerHeight-poY;
if(document.getElementById){
if(poD>0&&poD<document.getElementById('Menu').offsetWidth)
poX=e.pageX-document.getElementById('Menu').offsetWidth;
else
poX=e.pageX;
if(poA>0&&poA<document.getElementById('Menu').offsetHeight)
poY=e.pageY-document.getElementById('Menu').offsetHeight;
else
poY=e.pageY;
}
else{
if(poD>0&&poD<document.Menu.document.width)
poX=e.pageX-document.Menu.document.width;
else
poX=e.pageX;
if(poA>0&&poA<document.Menu.document.height)
poY=e.pageY-document.Menu.document.height;
else
poY=e.pageY;
}
}
}
// -->
</SCRIPT>
un poquito de estilo:
<STYLE type="text/css">
body {
background: #000;
}
a:link {
color: #999;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
}
a:visited {
color: #999;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
}
a:hover {
color: #666;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
}
a:active {
color: #999;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
}
a {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
#Menu{
position: absolute;
top: 100px;
left: 10px;
z-index: 99;
visibility: hidden;
}
</STYLE>
entres las etiquetas <body> y </body> colocar el HTML este script nomas sirve sin tener contenido... (ojo) pero con el se pueden lograr grandes cosas y crear la pagina con un diferente estilo...
<DIV id="Menu">
<TABLE style="background: #000; border: #123 solid 4px; -moz-border-radius: 8px;-webkit-border-radius: 8px;">
<TR><TD height=20><A href="http://www.google.com"> Google.com </A></TD></TR>
<TR><TD height=20><A href="http://www.yahoo.com"> yahoo.com </A></TD></TR>
<TR><TD height=20><A href="http://www.altavista.com"> Altavista </A></TD></TR>
<TR><TD height=20><A href="mailto:[email protected]"> Contactame </A></TD></TR>
</TABLE>
<SCRIPT language="JavaScript" type="text/javascript"><!--
iniciaMenu();
//-->
</SCRIPT>
</DIV>
Recomenda y tambien comenta Gracias
Demo: http://mydising.site90.com/nickpopup.html