Amor de Amistad: Menú pulsando el botón derecho del ratón

Este es otro proyecto que hace un tiempo vengo desarrollando. Lo que hace es que al pulsar el botón derecho del ratón en cualquier punto del blog se activa un menú.

Una forma elegante de bloquear el botón derecho del ratón.

Lo he probado en Firefox e Internet Explorer 7 y 8.

Ver ejemplo:

¿Cómo se hace...?

Ir a Diseño, Edición de HTML y justo arriba de </head>

Poner el siguiente código JavaScript:

<script type="text/javascript">
// http://loseasi.blogspot.com/
// Creado por Vku.
function mostrarmenuder() {
with(document.getElementById("menuder")) {
style.display = "";
}
return false
}

function cerrarmenuder() {
document.getElementById("menuder")
.style.display = "none";
}
document.oncontextmenu=mostrarmenuder
</script>

Ahora justo arriba de ]]></b:skin>

Poner el siguiente código CSS:

.menudervku {
position:fixed;
left:100px;
top:150px;
text-align:center;
text-decoration: none;
width:220px;
border:0px;
background-color:#fff;
font-family:Verdana;
cursor:pointer;
line-height: 24px;
z-index:999999999999999999;
}
.menulink {
font-size: 14px;
font-family:Arial, Verdana
height: 24px;
border-bottom:2px solid #000;
background-color:#333;
color:#fff;
}
.menulink:hover {
font-size: 14px;
font-family:Arial, Verdana
height: 24px;
border-bottom:2px solid #39F;
background-color:#555;
color:#39F;
}
.menulinkcerrar {
height: 25px;
border:0;
background-color:transparent;
}

Personalizar el diseño del menú a su gusto.

left:100px: distancia desde la izquierda.
top:150px: distancia desde arriba.
text-align:center: texto centrado.
width:220px: ancho del menú.

Link:

background-color:#555: color del fondo.
color:#fff: color del texto.

Link hover:

background-color:#333: color del fondo.
color:#39F: color del texto.

Abajo de <body>

Ponemos el siguiente código:

<div class='menudervku' id='menuder' style='display:none'>
<div class='menulinkcerrar' onclick='cerrarmenuder()'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko0qp4GvPe9ighbED8IFHeZDyNH636w4BCnk8xOgxglsXSr3NS4xcULsDdaR3asyYsDQskxBtiXPikoLiTUNfkThRpd5OGCTWGJnn8DzsCIkjRUMLcQWvSqa_k5Iu5PI_V6gOM5-QH18/s1600/cerrar.png' style='float: right;' title='Cerrar'/></div>

<div class='menulink' onClick='window.open("http://loseasi.blogspot.com/","_blank")'> http://loseasi.blogspot.com/ </div>

<div class='menulink' onClick='window.open("http://loseasi.blogspot.com/","_blank")'> LINK 2 </div>

<div class='menulink' onClick='window.open("http://loseasi.blogspot.com/","_blank")'> LINK 3 </div>

<div class='menulink' onClick='window.open("http://loseasi.blogspot.com/","_blank")'> LINK 4 </div>

<div class='menulink' onClick='window.open("http://loseasi.blogspot.com/","_self")'> LINK 5 </div>

<div onClick='window.open("http://loseasi.blogspot.com/2010/08/menu-pulsando-el-boton-derecho-del.html","_self")' style='float:right;font-size:60%;color:ccc;margin-right:10px;line-height:14px'> Obtener el menú </div>
</div>

Cambiar la imagen de cerrar.

Agregar o quitar los link de la siguiente forma:

<div class='menulink' onClick='window.open("http://loseasi.blogspot.com/","_blank")'> LINK Nº </div>

Donde:

http://loseasi.blogspot.com/: es el link que abrira al hacer click.

_blank: abre el link en otra pestaña.

_self: abre el link en la misma pestaña.

LINK Nº: texto a mostrar.

Guardar plantilla.

No quitar el ultimo link para que otros puedan obtener el menú.(Gracias):

<div onClick='window.open("http://loseasi.blogspot.com/2010/08/menu-pulsando-el-boton-derecho-del.html","_self")' style='float:right;font-size:60%;color:ccc;margin-right:10px;line-height:14px'> Obtener el menú </div>
</div>

Amor de Amistad

Menú pulsando el botón derecho del ratón

0 comments:

Post a Comment

Blog Archive