[TUTORIAL] menu desplegable al hacer clic derecho

linkgl · 10 Ago 2008, 01:33 · Solicitar retirada

Hola a tod@s bueno les explicare a poner un menu desplegable en su web al hacer clic derecho con el mouse se puede poner dentro de las etiquetas <body> y </body>

<STYLE>
<!--
.skin0{
position:absolute;
width:175px;
border:2px solid white;
background-color:#C0C0C0;
font-family:Verdana;
font-size: 10px;
line-height:15px;
cursor:default;
visibility:hidden;
}
.menuitems{
padding-left:10px;
padding-right:10px;
}
--> </style> 

<script language="JavaScript1.2">
var menuskin=0
var display_url=0
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"){
if (event.srcElement.getAttribute("target")!=null)
window.open(event.srcElement.url,event.srcElement.getAttribute("target"))
else
window.location=event.srcElement.url
}
}
</script> 
<!--[if IE]>
<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5()">
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Noticias</div>
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Encuesta</div>
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Mensajes SMS</div>
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Lista de Correo</div>
<hr>
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Foro</div>
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Webchat</div>
<hr>
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Recomendar</div>
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Contactar</div>
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- &iquest;Algún fallo?</div>
</div>
<![endif]-->
<script language="JavaScript1.2">
if (document.all&&window.print){
if (menuskin==0)
ie5menu.className="skin0"
else
ie5menu.className="skin1"
document.oncontextmenu=showmenuie5
document.body.onclick=hidemenuie5
}
</script>

Bueno si no saben del codigo sugiero no toquen mas que estas partes:

<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Noticias</div>
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Encuesta</div>
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Mensajes SMS</div>
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Lista de Correo</div>
<hr>
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Foro</div>
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Webchat</div>
<hr>
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Recomendar</div>
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Contactar</div>
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- &iquest;Algún fallo?</div>

donde dice url="pagina_pruebas.htm" lo cambiamos por la url a donde queremos que nos lleve al hacer clic

en donde dice:

contactar
recomendar
sms
etc

lo cambiamos por lo que quieres que se muestre al salir el desplegable! :wink:

linkgl · 13 Ago 2008, 03:24 · Solicitar retirada

alguien lo probo?

linkgl · 16 Ago 2008, 01:54 · Solicitar retirada

Parece que ha nadie le ha sido util :cry: xDD

josluisd123 · 13 Oct 2008, 11:44 · Solicitar retirada

Hola!Muchas gracias!está muy bien, sencillo y útil. Lo estoy probando y dentro de poco lo subiré a mi web.

linkgl · 14 Oct 2008, 01:06 · Solicitar retirada

q bueno que te sirve asi puedes evitar que vean tu codigo fuente o roben imagenes sin tener que bloquear el boton derecho

tucan · 17 Oct 2008, 04:48 · Solicitar retirada

Muy util gracias, me gusto mucho.

Xiuhcoatzin · 14 Ene 2009, 15:19 · Solicitar retirada

Genial muchas gracias linkgl, justamente estaba buscando el como proteger las imagenes dentro de la pagina pero esto esta mucho mejor, le das una utilidad muy practica al boton derecho del raton :D

Solo que tengo un pequeño problema, y es que le he cambiado el color al fondo y a los bordes, pero no he visto donde poder cambiar el color de las separaciones horizontales, bueno dejo una imagen:

[contenido no disponible]

lo que he modificado es esto

.skin0{ 
position:absolute; 
width:175px; 
border:2px solid #1C1C1C; 
background-color:brown; 
font-family:Verdana; 
font-size: 10px; 
line-height:15px; 
cursor:default; 
visibility:hidden;

tambien ya le he cambiado el color de la letra y el fondo al estar en hover
asi que solo me falta cambiarle el color a esas dos rallitas :P

gracias por todo...

Xiuhcoatzin · 10 Feb 2009, 06:34 · Solicitar retirada

Otra cosa para cuando linkgl (o alguien mas) se pase por aca

Que solo me funciona en IE, y no en mozilla :?

se puede hacer algo para que tambien se active ahi???

gracias

Adirio · 20 May 2009, 19:38 · Solicitar retirada

No se si esto se hara asi pero ¿ver donde pone?

<!--[if IE]> 
<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5()"> 
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Noticias</div> 
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Encuesta</div> 
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Mensajes SMS</div> 
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Lista de Correo</div> 
<hr> 
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Foro</div> 
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Webchat</div> 
<hr> 
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Recomendar</div> 
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- Contactar</div> 
<div class="menuitems" url="pagina_pruebas.htm" target="_self">- &iquest;Algún fallo?</div> 
</div> 
<![endif]-->

Fijate que la primera condicion que pone para que se vea lo que hay hasta el endif es que sea "IE", es decir "IE", si tu copias y pegas uno justo debajo de este pero que donde pone "IE" pones "MO" (creo que es "mo" la de firefox)o "mo" (no se cual de las 2 sera si en mayus. o en minusc.) te aparecera tambien en firefox.
Otra opcion seria quitarle la condicion ifIE pero puede que algun servidor de errores que es por lo que supongo que la habra puesto.

dianaprieto · 28 Feb 2015, 19:12 · Solicitar retirada

Esta muy bueno, muchísimas gracias ya lo he probado y funciona perfectamente. me ha gustado muchísimo, de nuevo gracias.