How to create a Hover Dropdown Menu? On click of item options, alert displays the item name!
Posted By: Kanika Gupta Published: 14, Jan 2024
Table of Contents
Ques - Create a dropdown menu "Actions". Which contains following items. 1. Add, 2. Update, 3. View, 4. Delete. On hover of "Actions" a dropdown will appear with the above options. On click of the options the item name will alert.
The following code has an internal CSS using <style> element.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Q3</title>
<style>
.dropdown-menu{
display: inline-block;
}
.drop-button{
border: none;
padding: 12px 15px;
font-weight: bolder;
font-size: 20px;
background: mediumpurple;
}
.drop-list{
display: none;
position: absolute;
z-index: 1;
border:1px solid white;
box-shadow: 5px 5px 5px 5px #888888;
padding: 5px 30px;
}
input[type=button]{
padding:10px;
display: block;
text-decoration: none;
color: black;
background-color: white;
border: none;
font-size: 14px;
}
.dropdown-menu:hover .drop-list{
display: block;
}
.drop-list .list-drp:hover{
background-color: white;
}
</style>
</head>
<body>
<div class="dropdown-menu">
<button class="drop-button">Actions</button>
<div class="drop-list">
<input type="button" id="Msg1" value="Add" onClick="myfunction(this.id)" />
<input type="button" id="Msg2" value="Update" onClick="myfunction(this.id)" />
<input type="button" id="Msg3" value="View" onClick="myfunction(this.id)" />
<input type="button" id="Msg4" value="Delete" onClick="myfunction(this.id)" />
</div>
</div>
</body>
<script type="text/javascript">
function myfunction(btnId) {
if (btnId == "Msg1") alert("ADD");
else if (btnId == "Msg2") alert("UPDATE");
else if (btnId == "Msg3") alert("VIEW");
else if (btnId == "Msg4") alert("DELETE");
else alert("Invalid ID!");
}
</script>
</html>Output Screenshots:
DROPDOWN
ALERT
