Introduction to popup menu JavaScript
Popup menu in JavaScript is defined as a list of commands and/or choices that are presented to the user of the application through a space in the display of the application when clicked on it. Prior to the display, the menu is hidden and only appears when a particular action is performed. This action can be a single click, right-click, or even a hover above the link. Now the actions mentioned are direct relevant to the requirements set by the website or the application.
For example, in Microsoft Word, a right-click pops up different options where the user can choose to cut, copy, paste as per the need of the user. Similarly, in some websites, users can hover or even click over a question mark icon and that will present the help text like product description in case of products in an e-commerce website. Here we will see at applications of JavaScript to build the popup menu in applications.
Syntax of popup menu JavaScript
Given below are the syntax mentioned:
1. Adding of HTML tags in JavaScript code.
<div class="< Class name >" onclick="< Function name >">' Replace with text as needs to be shown on application '
<span class="< Class name >" id="< ID name >">' Replace with text as needs to be shown on when the pop up is clicked or hovered or the corresponding action that is taken '</span>
</div>2. Declaring the pop-up container.
.popup {
position: < Replace with position that needs to be as a part of app design >;
display: < Replace with display that needs to be as a part of app design >;
cursor: < Replace with cursor type that needs to be as a part of app design >;
}3. Adding an animation when the pop-up text or link is clicked.
@-webkit-keyframes < Animation Type > {
< Properties of the corresponding animation type is listed here so that
The animation performs as per the requirement >
}How to Create a popup menu in JavaScript?
In order to create a pop-up, one would need to understand the underlying design of the application. Once the place where the popup menu will be placed is determined as per the look and feel of the application the different elements of the visual aspects start popping in. We would need to then think about the different animations that would be required in order to provide the best visual effect to the animation. In order to address the requirements, we would need to understand the different elements that will be a part while building the application.
The HTML or Hypertext Markup language is the first element that needs to be a part of the design. This is used majorly for documents design for displaying in the web browser. The web browsers retrieve the HTML documents from the web server or the local storage where the website is launched and then assist in rendering the documents to present that as a multimedia web page. This element hence becomes the first step of creating the pop-up.
Here we would assign the,
- Required text that would be present on the website.
- Action that needs to be performed upon activation of another action. For example, if clicked, what needs to be done. When hovered, what needs to be performed, and so on.
- What would be present in the pop-up menu?
Post the addition of the HTML in the code, we would need to add the CSS. CSS stands for Cascading Style Sheets and this feature is used in describing how the document will be presented in the corresponding display screen (viz. Desktop, mobile, mobile landscape, tablet, tablet landscape). CSS provides the kind of assistance to the HTML that creates the web page of the application.
CSS provides various options like:
- The Pop-up container constitutes how the pop-up’s skeleton will look like.
- The presentation of the text will be present in the pop-up.
- Any arrow that needs to be a part of the pop-up.
- The animation aspect of the pop-up as to how it will come into view, or what transitions will be a part of the pop-up display.
Finally, the JavaScript element is added, wherein the function is explained and, in this function, the respective action of grabbing the element by its ID or any other representation is done. With this, we finally have a working pop-up in JavaScript.
Example of popup menu JavaScript
Popup menu in JavaScript and sliding animation.
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 162px;
background-color: #c000ff;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 7px 0;
position: absolute;
z-index: 1;
bottom: -325%;
left: 43%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: -10%;
left: 50%;
margin-left: 6px;
border-width: 5.5px;
border-style: solid;
border-color: #c000ff transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation-name: bounce;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes bounce {
from {
left: 0px;
}
to {
left: 198px;
}
}
</style>
</head>
<body style="text-align:center">
<h2>Pop up with bounce animation and the slider moves from left to right of the text and then settles at the center</h2>
<div class="popup" onclick="myFunction()">Click here to view the Pop up!
<span class="popuptext" id="popUpElement">Pop-up with a bounce animation</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("popUpElement");
popup.classList.toggle("show");
}
</script>
</body>
</html>Output:
Conclusion
With the help of this article, we have gone through the steps and the explanation of the element that will constitute the popup menu along with an example to define the visual aspect of the popup menu. Readers are encouraged to try experimenting with different animations and see what would be most appealing for the website.