ZilaStar ICT
Jul 08 2022, 18:08:34
Category : JavaScript Tutorials
Dropdown Menu
<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
.dropdown{
display: inline-block;
position: relative;
}
.dropbtn{
background-color: red;
font-size: 14px;
color: white;
padding: 12px 32px;
cursor: pointer;
border: 2px solid green;
}
.dropbtn:hover, .dropbtn:focus{
background-color: orange;
}
.dropcontent{
display: none;
overflow: auto;
position: absolute;
box-shadow: 0px 2px 1px 3px;
}
.dropcontent a{
display: block;
color: white;
padding: 15px 32px;
text-decoration: none;
background-color: red;
}
.dropcontent a:hover{
background-color: orange;
}
.show{
display: block;
}
</style>
</head>
<body>
<div class = "dropdown">
<button id = "myBtn" class = "dropbtn">Example</button>
<div id = "myDrop" class = "dropcontent">
<a href = "">Example_1</a>
<a href = "">Example 2</a>
<a href = "">Example 3</a>
</div>
</div>
<script>
document.getElementById("myBtn").onclick = function(){jsFun()};
function jsFun(){
document.getElementById("myDrop").classList.toggle("show");
}
</script>
</body>
</html>
Comments:
No comment to show.