[TUTORIAL] menu desplegable al hacer clic derecho

**linkgl** · 09/08/2008, 23:33

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>

Código:

<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:

Código:

<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!

**linkgl** · 13/08/2008, 01:24

alguien lo probo?

**linkgl** · 15/08/2008, 23:54

Parece que ha nadie le ha sido util

xDD

**josluisd123** · 13/10/2008, 09:44

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

**linkgl** · 13/10/2008, 23:06

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/10/2008, 02:48

Muy util gracias, me gusto mucho.

**Xiuhcoatzin** · 14/01/2009, 13:19

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:

lo que he modificado es esto

Código:

.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/02/2009, 04:34

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/05/2009, 17:38

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

Código:

<!--[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.