JavaScript Haga clic derecho Menú

Se abre un menú contextual o el menú de clic derecho cuando el usuario hace clic con el botón derecho en una página web. A veces, los desarrolladores pueden necesitar expandir el menú contextual predeterminado, pero no pueden hacerlo. Entonces, los desarrolladores crean sus menús personalizados. Un menú contextual personalizado ofrece la opción de agregar características únicas y ayuda al sitio web o la página web a parecer más adaptables y apropiadas para el contexto.

Este estudio demostrará el menú de clic derecho y cómo crear un menú personalizado de clic derecho en JavaScript.

¿Cuál es el menú predeterminado de clic auxiliar en una página web??

Cuando hace clic en una página web con el botón correcto de su mouse, aparece un cuadro con varias opciones de menú, se llama un menú de clic derecho o un menú contextual predeterminado:

Veamos un ejemplo de cómo crear un menú personalizado de clic derecho en una página web.

Creación de un menú personalizado de clic derecho con JavaScript
Crearemos una página web simple con HTML y CSS y luego crearemos un menú personalizado de clic derecho en la página web usando JavaScript. Posicionaremos y diseñaremos nuestro menú personalizado con clic derecho con propiedades CSS:

JavaScript Haga clic derecho Menú

Para obtener un menú contextual personalizado, haga clic en cualquier lugar de la página

Luego, escriba el código para el menú personalizado de clic derecho en un archivo JavaScript. Primero, oculte o bloquee el menú contextual predeterminado en una página web.

• Llama a "PreventDefault ()"Método que evita que aparezca el menú predeterminado con el clic derecho mientras se activa el" "Menú de contexto" evento.
• Llame a la función definida llamada "CreateMenuonrightClick ()"Para el menú personalizado de clic derecho con"mi.clerx" y "mi.clery"Argumentos que muestran la posición del mouse:

_CurrentMenUvisible = null;
documento.addEventListener ('contextMenu', e =>
mi.prevenDefault ();
CreateMenuonrightClick (e.ClientX, E.Clienty);
);

Defina una función "CreateMenuonrightClick ()"Que se lanzará al clic derecho del usuario en la página web:

función createMenuonrightClick (x, y)
cierre demenu ();
const menuelement = documento.createElement ('div');
menuelement.Lista de clase.agregar ('contextMenu');
const menulistelement = documento.createElement ('ul');
const menineArray = ['refresh', 'abrir', 'guardar', 'copiar', 'ayuda'];
for (elemento var de menineArray)
var listElement = documento.createElement ('li');
listado.innerhtml = '' + elemento + '';
menulistelemento.AppendChild (ListElement);

menuelement.AppendChild (Menulistelement);
documento.cuerpo.AppendChild (Menuelement);
_CurrentMenUvisible = Menuelement;
menuelement.estilo.display = 'bloque';
menuelement.estilo.izquierda = x + "px";
menuelement.estilo.top = y + "px";

Repasemos lo que está sucediendo en el código mencionado anteriormente:

• En el clic derecho, lo primero es cerrar cualquier otro menús de clic derecho o contexto que se abra actualmente en la página.
• Luego creamos un nuevo "div"Que alojará el menú personalizado de clic derecho.
• Entonces, dentro del "div", Se agrega una lista desordenada que contiene una variedad de listas que aparecen como un menú en la página web.

Para cerrar el menú contextual, haga clic en cualquier lugar en la página web. Esto se manejará usando el "hacer clic"Evento que se activará cuando el usuario haga clic en la página web después de abrir el menú de clic derecho. Este controlador de eventos llama a la función especificada "Closetheopenedmenu ()":

documento.addEventListener ('hacer clic', e =>
cierre demenu ();
);

Ahora, defina una función "Closetheopenedmenu ()"Para cerrar el menú de clic derecho donde llame al"ClosecontextMenu ()Método "que cerrará el menú:

function stersetheopenedmenu ()
if (_currentMenUvisible !== nulo)
CloseContextMenu (_CurrentMenUvisible);

El "ClosecontextMenu ()El método "se define a continuación:

function CloseContextMenu (menú)
menú.estilo.izquierda = '0px';
menú.estilo.top = '0px';
documento.cuerpo.RemoVeChild (menú);
_CurrentMenUvisible = null;

Para peinar un menú contextual o menú de clic derecho, aplique CSS a varios elementos para que se vea bien. Primero, agregue el estilo a la etiqueta del cuerpo para alinear el texto en el centro y establezca el color de fondo:

cuerpo
Text-Align: Center;
Antecedentes: #B7C4F1;

Estilizar el menú configurando el color del texto, el color de fondo, el borde y la posición a "absoluto":

.Menú de contexto
Posición: Absoluto;
Ancho: 100px; Altura: Auto;
Color: #B7C4F1;
Antecedentes: #344683;
borde: 1px sólido #344683;
Pantalla: ninguno;

Estilizar la lista desordenada con los elementos de la lista para establecer el relleno y el margen:

.contextmenu ul
relleno: 0;
margen: 0;

.contextmenu ul li
Border-Bottom: #B7C4F1 1PX Solid;
relleno: 0;
margen: 0;

Establezca el borde de la última opción del menú utilizando el "bordePropiedad que no será ninguna;

.contextmenu ul li: último hijo
Border-Bottom: Ninguno;

Estilizar el menú con una etiqueta de anclaje.

.contextmenu ul li a
text-align: izquierda;
bloqueo de pantalla;
relleno: 5px 10px;
Color: #B7C4F1;
Texto-transformación: capitalizar;
Decoración de texto: ninguna;

Establezca el color de fondo de los elementos de la lista en Hover:

.contextmenu ul li a: hover
Antecedentes: #2777ff;

Como puede ver en la salida, hacer clic en una página web con el botón derecho del mouse muestra un menú personalizado de clic derecho:

Conclusión

Dado que el menú contextual predeterminado no se puede ampliar para agregar opciones personalizadas, por lo tanto, se debe crear un menú personalizado con clic derecho para proporcionar opciones personalizadas al usuario. Se puede crear fácilmente un menú personalizado de clic derecho en la posición actual del mouse con la ayuda de JavaScript y CSS. En esta publicación de blog, se ha creado un menú personalizado con clic derecho y el procedimiento se explica paso a paso.