Q:

Javascript Program to implement Dropdown Menu

YasminRadwan26
Save to bookmark
|
2022-05-24
|
  128 
0

Javascript Program to implement Dropdown Menu using javascript.

JavaScript programming, examples, JavaScript programming examples,
login and add your own answer to this question

All Answers

YasminRadwan26
2022-05-24
need an explanation for this answer? contact us directly to get an explanation for this answer 

<html>
<head>
<style>
.dropbtn {
    background-color: grey;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover {
    background-color: orange;
    color:black;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdowndata {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    z-index: 1;
}

.dropdowndata a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #ddd}

.show {display:block;}
</style>
</head>

<body>

<h2>Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

<div class="dropdown">
<button onclick="Function()" class="dropbtn">Dropdown</button>
  <div id="Dropdown" class="dropdowndata">
    <a >This is a Link1</a>
    <a >This is a Link2</a>
    <a >This is a Link3</a>
  </div>
</div>

<script>
function Function() {
    document.getElementById("Dropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdowndata");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

Similar questions

need a help?

find thousands of online teachers now