This is one of the simple concept this will done by using css and simple javascript. In web developing field we can use this type of dropdown button in lot places. So this not only simple method this is also important concept. This button works on click function on clicks it opens the drop down content and shows the sub menus, When you click the same button again the sub buttons will hide. This is almost toggle type menu.
Here i given code and live demos you can download the code and customize according to your website. I hope this simple javascript concept helpful.The below image shows how the dropdown menu looks after before click
Create simple dropdown Button:
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #A55F23;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #8B4D18;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #C69A74;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
right: 0;
z-index: 1;
}
.dropdown-content a {
color: #ffffff;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #915828}
.show {display:block;}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Click for Branches</button>
<div id="myDropdown" class="dropdown-content">
<a href="#Branche1">Branch 1</a>
<a href="#Branche2">Branch 2</a>
<a href="#Branche3">Branch 3</a>
</div>
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
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>
0 Comments