Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Pequeño menu en HTML y Javascript al hacer boton derecho
#1
Bueno aqui un pequeño menu desplegable y como hacerlo:
Entre el <head> y </head>
Este es el codigo en el que le da efecto y estilo:
Código:
<script type="text/javascript">
var ns4 = (document.layers)? true:false
var ie = (document.all)? true:false
var ns6 = (document.getElementById && !document.all) ? true: false;
var coorX, coorY;
if (ns6) document.addEventListener("mousedown", coord, true)
if (ns4) {document.captureEvents(Event.MOUSEDOWN); document.mousedown = coord;}
if (ie) document.onmousedown = coord

function coord(e)
{
  if (ns4||ns6)  {
   coorX = e.pageX;
   coorY = e.pageY;
  }
  if (ie)  {
   coorX = event.x;
   coorY = event.y;
  }
  if (document.layers && !document.getElementById){
   if (e.which == 2 || e.which == 3){
   mostrar()
   return false;
   }
  }

  return true;
}
function mostrar()
{

  with(document.getElementById("menu"))  {
   style.top = coorY + 10;
   style.left = coorX + 10;
   style.visibility = "visible";
  }
  return false
}

function ocultar()
{
  document.getElementById("menu").style.visibility = "hidden";
}
document.oncontextmenu=mostrar
</script> <style>
.skin0
{
position:absolute;
border:1.5px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
height:auto;
}
.menuitems
{
font-size: 12px;
FONT-FAMILY:Verdana;
padding-right:20px;
}
</style>
Luego el menu que hay que insertar entre el <body> y </body>
Código:
<body onclick="ocultar()">
<center><b>Haz Click Derecho</b></center>
<div id="menu" class="skin0" style="visibility:hidden">
<div class="menuitems" onclick="location.href='http://foro.portal-hacker.net'" onmouseover="this.style.background='highlight';this.style.color='white'" onmouseout="this.style.background='menu';this.style.color='black'"> PortalHacker</div>
<div class="menuitems" onclick="location.href='http://playkong.es'" onmouseover="this.style.background='highlight';this.style.color='white'" onmouseout="this.style.background='menu';this.style.color='black'"> PeLx</div>
</div>
Si quieren poner una barrilla en medio de cada texto inserta la etiqueta:
Código:
<hr>
(Recuerden en una sola linea)
Bueno aqui el codigo fuente entero:
Código:
<html>
<head>
<title>Menu</title>
<script type="text/javascript">
var ns4 = (document.layers)? true:false
var ie = (document.all)? true:false
var ns6 = (document.getElementById && !document.all) ? true: false;
var coorX, coorY;
if (ns6) document.addEventListener("mousedown", coord, true)
if (ns4) {document.captureEvents(Event.MOUSEDOWN); document.mousedown = coord;}
if (ie) document.onmousedown = coord

function coord(e)
{
  if (ns4||ns6)  {
   coorX = e.pageX;
   coorY = e.pageY;
  }
  if (ie)  {
   coorX = event.x;
   coorY = event.y;
  }
  if (document.layers && !document.getElementById){
   if (e.which == 2 || e.which == 3){
   mostrar()
   return false;
   }
  }

  return true;
}
function mostrar()
{

  with(document.getElementById("menu"))  {
   style.top = coorY + 10;
   style.left = coorX + 10;
   style.visibility = "visible";
  }
  return false
}

function ocultar()
{
  document.getElementById("menu").style.visibility = "hidden";
}
document.oncontextmenu=mostrar
</script> <style>
.skin0
{
position:absolute;
border:1.5px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
height:auto;
}
.menuitems
{
font-size: 12px;
FONT-FAMILY:Verdana;
padding-right:20px;
}
</style>
</head>
<body onclick="ocultar()">
<center><b>Haz Click Derecho</b></center>
<div id="menu" class="skin0" style="visibility:hidden">
<div class="menuitems" onclick="location.href='http://foro.skylium.com'" onmouseover="this.style.background='highlight';this.style.color='white'" onmouseout="this.style.background='menu';this.style.color='black'">Skylium</div>
<hr>
<div class="menuitems" onclick="location.href='http://hostig.skylium.com'" onmouseover="this.style.background='highlight';this.style.color='white'" onmouseout="this.style.background='menu';this.style.color='black'">Hosting</div>
</div>
</body>
</html>
Suerte y espero que os halla gustado


Tutorial Original por: playkong
[Imagen: bann.png]
WWW
#2
No puedes poner una imagen para ver como queda? :p gracias de antemano.
#3
PkPedro escribió:No puedes poner una imagen para ver como queda? :p gracias de antemano.

Yo opino lo mismo!
elCSS.com
[Imagen: 33jsqk6.png]
Crece con nosotros || Síguenos en Twitter - Facebook - RSS
WWW
#4
miren aquí les dejo una captura con el último code:

[Imagen: htmlcode.png]

además les dejo un sitio en donde pueden probar cualquier fragmento de html: http://htmledit.squarefree.com/

sólo copien el código, peguenlo en el cuadro de arriba y les mostrará el resultado.
[Imagen: bann.png]
WWW
#5
Tantisimo codigo para eso?? Si eso se puede hacer con una simple tabla y cambiandole el color de fondo Triste :blink: Confundidohocking:
elCSS.com
[Imagen: 33jsqk6.png]
Crece con nosotros || Síguenos en Twitter - Facebook - RSS
WWW
#6
Si que es un poco simple el menú Guiño Gracais de topdos modos Guiño
WWW
#7
Taquion escribió:http://htmledit.squarefree.com/
Buena web Taq. Me la apunto Lengua
WWW
#8
pues tanto código no, simplemente es esto:
Código:
<html>
<head>
<title>Menu</title>
<script type="text/javascript">
var ns4 = (document.layers)? true:false
var ie = (document.all)? true:false
var ns6 = (document.getElementById && !document.all) ? true: false;
var coorX, coorY;
if (ns6) document.addEventListener("mousedown", coord, true)
if (ns4) {document.captureEvents(Event.MOUSEDOWN); document.mousedown = coord;}
if (ie) document.onmousedown = coord

function coord(e)
{
  if (ns4||ns6)  {
   coorX = e.pageX;
   coorY = e.pageY;
  }
  if (ie)  {
   coorX = event.x;
   coorY = event.y;
  }
  if (document.layers && !document.getElementById){
   if (e.which == 2 || e.which == 3){
   mostrar()
   return false;
   }
  }

  return true;
}
function mostrar()
{

  with(document.getElementById("menu"))  {
   style.top = coorY + 10;
   style.left = coorX + 10;
   style.visibility = "visible";
  }
  return false
}

function ocultar()
{
  document.getElementById("menu").style.visibility = "hidden";
}
document.oncontextmenu=mostrar
</script> <style>
.skin0
{
position:absolute;
border:1.5px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
height:auto;
}
.menuitems
{
font-size: 12px;
FONT-FAMILY:Verdana;
padding-right:20px;
}
</style>
</head>
<body onclick="ocultar()">
<center><b>Haz Click Derecho</b></center>
<div id="menu" class="skin0" style="visibility:hidden">
<div class="menuitems" onclick="location.href='http://foro.skylium.com'" onmouseover="this.style.background='highlight';this.style.color='white'" onmouseout="this.style.background='menu';this.style.color='black'">Skylium</div>
<hr>
<div class="menuitems" onclick="location.href='http://hostig.skylium.com'" onmouseover="this.style.background='highlight';this.style.color='white'" onmouseout="this.style.background='menu';this.style.color='black'">Hosting</div>
</div>
</body>
</html>

además entre el código hay opciones para que le puedas cambiar el color y hacerlo más profesional XD
[Imagen: bann.png]
WWW
#9
Yo creo que es bastante codigo para un menu que...

Espera una pregunta, tiene animaciones??
elCSS.com
[Imagen: 33jsqk6.png]
Crece con nosotros || Síguenos en Twitter - Facebook - RSS
WWW
#10
Vale lo acabo de comprobar, veo demasiado codigo para lo que se puede usar en una pagina, no se, no lo veo aprovechable
elCSS.com
[Imagen: 33jsqk6.png]
Crece con nosotros || Síguenos en Twitter - Facebook - RSS
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  PRIMER PAGINA WEB HTML DEL MUNDO Smithcanal 24 314 03-09-2017, 04:13 AM
Último mensaje: gassip
  Plantillas HTML Responsive Free Profesionales gassip 16 350 13-06-2017, 03:45 AM
Último mensaje: gassip
Música [Aporte] Reproductor de audio html djsmokingcr 11 293 02-05-2017, 03:04 AM
Último mensaje: gassip
  [Tutorial] Métodos para redireccionar URLs (HTML, PHP y Javascript wiston3 1 145 01-12-2016, 11:12 PM
Último mensaje: zeuz
  Expandir etiquetas HTML en documento .php con EMMET gassip 2 164 18-11-2016, 07:28 PM
Último mensaje: DaveNPlay
  Linux Foundation respalda JavaScript Kiichi 3 154 03-11-2016, 03:43 AM
Último mensaje: habacuc78
  [Aporte] PcTag: Información HTML KesiaMuller 0 142 28-10-2016, 05:42 AM
Último mensaje: KesiaMuller
  [Tutorial] Curso de PSD a HTML a WP habacuc78 14 603 31-08-2016, 09:33 PM
Último mensaje: ServiRemate
  [Aporte] Curso básico de Javascript habacuc78 22 834 05-07-2016, 03:53 PM
Último mensaje: escuelasegura
  Trucos y efectos de Javascript para tu página web CarlosAlberto 0 394 05-01-2016, 03:51 PM
Último mensaje: CarlosAlberto



Usuarios navegando en este tema: 1 invitado(s)