mirror of https://github.com/nanoy42/coope
6 changed files with 160 additions and 4 deletions
@ -0,0 +1,28 @@ |
|||
/* The container <div> - needed to position the dropdown content */ |
|||
.dropdown { |
|||
position: relative; |
|||
display: inline-block; |
|||
} |
|||
|
|||
/* Dropdown Content (Hidden by Default) */ |
|||
.dropdown-content { |
|||
display: none; |
|||
position: absolute; |
|||
background-color: #f1f1f1; |
|||
min-width: 160px; |
|||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); |
|||
z-index: 1; |
|||
} |
|||
|
|||
/* Links inside the dropdown */ |
|||
.dropdown-content a { |
|||
color: black; |
|||
padding: 12px 16px; |
|||
text-decoration: none; |
|||
display: block; |
|||
cursor: pointer; |
|||
} |
|||
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ |
|||
.show { |
|||
display:block; |
|||
} |
|||
@ -0,0 +1,27 @@ |
|||
/* When the user clicks on the button, |
|||
toggle between hiding and showing the dropdown content */ |
|||
function dropdown(target) { |
|||
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'); |
|||
} |
|||
} |
|||
document.getElementById(target).classList.toggle("show"); |
|||
} |
|||
|
|||
// Close the dropdown menu if the user clicks outside of it
|
|||
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'); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue