Cómo crear menú emergente en JavaScript

En JavaScript, un menú emergente es un menú en pantalla que aparece en la parte superior del texto/imagen cuando alguien hace clic en él. Normalmente, un menú emergente está oculto y puede aparecer en función de la acción del usuario, como hacer clic con el botón derecho, hacer clic izquierdo o, a veces, flotar por encima del enlace. Entonces, en general, podemos decir que un menú emergente es un cuadro que se utiliza para mostrar las notificaciones/mensajes al usuario, sin embargo, estas notificaciones aparecen en función de las acciones del usuario.

En este artículo, aprenderemos cómo crear un menú emergente en JavaScript, y en este sentido, pasaremos por los siguientes pasos:

• Cómo agregar etiquetas HTML
• Cómo declarar un contenedor emergente
• Cómo diseñar/diseñar un menú emergente
• Cómo agregar el código JavaScript para abrir el menú emergente

Entonces empecemos!

Cómo agregar etiquetas HTML

Se pueden usar diferentes etiquetas HTML para crear menús emergentes, por ejemplo, un botón, etiqueta,

etiqueta, etc. El código HTML que se indica a continuación lo ayudará a este respecto.

Haz click en mi!
class = "PopupContent"> Bienvenido a Linuxhint.comunicarse

El fragmento anterior describe que el método showpopup () se invocará cuando alguien haga clic en el texto asociado con el menú emergente. El menú emergente mostrará un mensaje de saludo "Bienvenido a Linuxhint.com ".

Cómo declarar un contenedor emergente

Ahora, declararemos el contenedor emergente donde definiremos el comportamiento del menú emergente utilizando diferentes propiedades de CSS, como pantalla, posición, cursor, etc.

.PopupClass
Posición: relativo;
Pantalla: bloque en línea;
cursor: contexto-menú;

Cómo diseñar/diseñar un menú emergente

Podemos diseñar un menú emergente con diferentes propiedades CSS como se muestra en el fragmento a continuación:

.cajas ventajeras .PopupContent
Visibilidad: oculto;
Color de fondo: negro;
color rojo;
Ancho: 200px;
Text-Align: Center;
Posición: Absoluto;
índice z: 1;
Border-Radius: 10px;
relleno: 10px 0;
Abajo: 100%;
Izquierda: 30%;
margen -izquierda: -100px;

/ * Flecha emergente de estilo */
.cajas ventajeras .popupcontent :: después
contenido: "";
Posición: Absoluto;
Top 100%;
Izquierda: 10%;
margen -izquierda: -10px;
ancho fronterizo: 5px;
estilo fronterizo: sólido;
color de borde: transparente transparente negro transparente transparente;

En este ejemplo, establecemos la visibilidad como "oculta", lo que significa que inicialmente el menú emergente estará oculto. A continuación, utilizamos algunas propiedades de CSS para diseñar el menú emergente, como color de fondo, alineación de texto, relleno, etc. Por último, especificamos las propiedades como el contenido, el color de fondo, la posición, etc. para diseñar la flecha emergente.

Cómo agregar el código JavaScript para abrir el menú emergente

Ahora, es hora de escribir el código JavaScript. El siguiente fragmento especificará el código para abrir un menú emergente cuando un usuario haga clic en el DIV:

función showPopup ()
Sea value = documento.getElementById ("PopUpitem");
surgir.Lista de clase.toggle ("pantalla");

El siguiente fragmento muestra el código completo para crear un menú emergente muy simple en JavaScript:

Cómo crear un menú emergente en JavaScript

Haz click en mi!
Bienvenido a Linuxhint.comunicarse!

Obtendremos la siguiente salida en la ejecución exitosa del código:

La salida muestra que el menú emergente aparece cuando hacemos clic en el texto.

Conclusión

En JavaScript, un menú en pantalla que aparece en la parte superior del texto/imagen se conoce como el menú emergente. Aparece solo cuando alguien hace clic en él. Un menú emergente permanece oculto hasta que alguien hace clic en él. Esta publicación presentó una guía paso a paso para crear un menú emergente en JavaScript. Para la claridad de los conceptos, consideramos un par de ejemplos y los implementamos prácticamente.