I wrote this HTML to create 2 dropdowns :
window.onclick = function(event) {
var targ = event.target;
var drp = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < drp.length; i++) {
if (drp[i].previousElementSibling == targ) {
targ.nextElemntSibling.classList.toggle("active");
targ.nextElemntSibling.classList.toggle("show");
} else {
drp[i].classList.remove('show');
drp[i].previousElementSibling.classList.remove('active')
}
}
}
.searchGrid {
display: flex;
grid-template-columns: repeat(4, 25%);
gap: 30px;
place-items: center;
}
/* CHOOSE CITY*/
.chooseCity {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980B9;
}
.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;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd
}
.show {
display: block;
}
/* CHOOSE YEAR*/
.chooseyear {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980B9;
}
.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;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd
}
.show {
display: block;
}
<div class="searchGrid">
<div class="chooseCity">
<button onclick="CityFunc()" class="dropbtn">Choose city</button>
<div id="cityDropdown" class="dropdown-content">
Los Angeles
New York
Toronto
Las Vegas
</div>
</div>
<div class="chooseyear">
<button onclick="yearFunc()" class="dropbtn">Choose year</button>
<div id="yearDropdown" class="dropdown-content">
1960
1970
1980
</div>
</div>
</div>
I found the JavaScript function which should close the dropdowns when I click on a different location in the website
But, When I click on the "Choose city" button, it opens the dropdown and when I click on the "Choose year" button, it will close the "Choose city" dropdown and open the new one, like it should.
For some reason when I click on the "Choose year" button and then click on the "Choose city", it will open the "Choose city" dropdown but won't close the "Choose year"
What am I missing here?
You have one mistake targ.nextElemntSibling it return undefined. Also
not declared functionsCityFunc() yearFunc(). See correct example in here
window.onclick = function (event) {
var targ = event.target;
var drp = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < drp.length; i++) {
if (drp[i].previousElementSibling === targ) {
drp[i].classList.toggle("show");
drp[i].previousElementSibling.classList.toggle("active");
} else {
drp[i].classList.remove("show");
drp[i].previousElementSibling.classList.remove("active");
}
}
};
Related
I have created a custom CSS select and need help to make the #drop in form of a modal.
So that whenever a user clicks on the dropdown button, it will open a modal containing a list of options. And selecting a list will show information on that particular list option.
Also, the #drop div does not appear in the middle of the screen.
I'm new to JS and have managed to create a structure. I'm sharing the code below. Please help me with the modal so that the entire thing works perfectly.
Thanks in advance.
PS: If you think there's some easy way of doing this please add the code to the answer.
<!-- HTML -->
<div class="dropdown">
<button onclick="toggleDrop(document.querySelector('#drop'))" class="dropbtn"></button>
<div id="drop" class="dropdown-content d-none">
<ul>
<li>Click for Bird Name</li>
<li>Click for Animal Name</li>
</ul>
</div>
</div>
<div class="tabs">
<!-- Bird Name -->
<div tab-name="dl-tabOne" class="dl-tabcontent">
Parrot
</div>
<!-- Animal Name -->
<div tab-name="dl-tabTwo" class="dl-tabcontent d-none">
Lion
</div>
</div>
<!-- CSS -->
.d-none {
display: none;
}
.dropbtn {
display: block;
font-size: 40px;
font-weight: 700;
margin: auto;
width: auto;
outline: none;
border: none;
border-bottom: 2px solid ;
border-bottom-style: dotted;
height: 60px;
cursor: pointer;
overflow: hidden;
color: #150ee6;
background: none;
}
.dropdown {
position: relative;
margin: 30px 30px 10px;
text-align: center;
}
.dropdown-content {
position: absolute;
background-color: #fff;
min-width: 250px;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 5px 4px -5px rgba(0, 0, 0, 0.1);
z-index: 1;
text-align: left;
padding: 20px;
}
.dropdown-content ul {
padding: 0;
}
.dropdown-content li {
list-style-type: none;
border-bottom: 1px solid #dfe1e5;
}
.dropdown-content li:last-child{
border: none;
}
.dropdown-content a {
color: #0d0d21;
padding: 15px 10px;
font-size: 1rem;
text-decoration: none;
list-style-type: none;
display: block;
font-weight: 600;
}
.dropdown-content a:hover {
background-color: #f2f2f2;
}
.tabs {
max-width: 720px;
margin: 0 auto;
}
.dl-tab-abt{
margin-top: 25px !important;
}
<!-- JS -->
setButtonInnerText(document.querySelector(".dropbtn"))
function openPage(id, a) {
const p = document.querySelector("[tab-name='" + id + "']");
const tabs = document.querySelectorAll(".tabs .dl-tabcontent");
for (var x = 0; x < tabs.length; x++)
tabs[x].classList.add("d-none");
if (p !== null) {
document.querySelector(".dropbtn").innerHTML = a.innerHTML;
p.classList.remove("d-none");
}
}
function toggleDrop(drop) {
drop.classList.toggle("d-none");
drop.onclick = function (e) {
drop.classList.add("d-none");
}
}
function setButtonInnerText(btn) {
const firstOption = btn.parentElement.querySelector("#drop a:first-child");
btn.innerHTML = firstOption.innerHTML;
}
I'm trying to populate a dropdown menu with jquery with a series of elements (projects) but it doesn't work. From the interface I see the button "dropdown", but if I click it I don't see anything, how can I solve this? When I click it I should see the list of projects that I pass to it (see loop for javascript)
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980B9;
}
/* 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;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd
}
/* 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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
</div>
</div>
The issue is that you have no way to display the drop down. There's a comment that says "add [.show] on click" - but you can also do this with hover css, so no need for js.
.dropbtn:hover + .dropdown-content {
display:block;
}
Adding that to your (otherwise working snippet) gives:
var result = {
"status": 0,
"message": "OK",
"projects": ["p1", "p2", "p3"]
}
for (var i = 0; i < result.projects.length; i++) {
$('#myDropdown').append('<a data-id= "' + i + '">' + result.projects[i] + '</a>');
}
.dropbtn:hover + .dropdown-content {
display:block;
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980B9;
}
/* 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;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd
}
/* 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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
</div>
</div>
If you do want it on click, then you need to add a click handler, eg:
$(".dropbtn").click(() => { $(".dropdown-content").toggleClass("show") });
Giving:
var result = {
"status": 0,
"message": "OK",
"projects": ["p1", "p2", "p3"]
}
for (var i = 0; i < result.projects.length; i++) {
$('#myDropdown').append('<a data-id= "' + i + '">' + result.projects[i] + '</a>');
}
$(".dropbtn").click(() => { $(".dropdown-content").toggleClass("show") });
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980B9;
}
/* 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;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd
}
/* 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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
</div>
</div>
I started writing a responsive navigation bar (4 menu item) with two clickdowns. Now, I would like to add a third one. But when I add a third one, it won't dropdown. Earlier someone helped me with the second one (which also didn't drop down) and it works. So I thought I'd just copy the JS from the second one but that didn't work. Can someone tell me what I need to do in order for the third one to also dropdown? Thx!
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
/*If you bind 2 onclick then only last one will fire*/
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
removeShow("dropdown-content");
}
if (!event.target.matches('.dropbtn2')) {
removeShow("dropdown-content2");
}
}
function removeShow(className) {
var dropdowns = document.getElementsByClassName(className);
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show");
}
/* Navigation */
.navbar-0 {
height: auto;
}
.navbar-1 {
text-align: center;
color: #FB4D4D;
padding: 0px;
}
.home,
.contact {
padding: 5px;
}
/* Dropdown Button */
.dropbtn {
text-align: center;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: white;
color: #FB4D4D;
padding: 0px;
margin: 0px;
border: none;
cursor: pointer;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
margin: 5px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
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: #FB4D4D;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 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;
border: none;
}
/*2e drop*/
/* Dropdown Button */
.dropbtn2 {
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: white;
color: #FB4D4D;
padding: 0px;
margin: 0px;
border: none;
cursor: pointer;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown2 {
position: relative;
margin: 5px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content2 {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content2 a {
color: #FB4D4D;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content2 a:hover {
background-color: #f1f1f1
}
/* 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;
border: none;
}
/*3e drop*/
/* Dropdown Button */
.dropbtn3 {
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: white;
color: #FB4D4D;
padding: 0px;
margin: 0px;
border: none;
cursor: pointer;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown3 {
position: relative;
margin: 5px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content3 {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content3 a {
color: #FB4D4D;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content3 a:hover {
background-color: #f1f1f1
}
/* 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;
border: none;
}
button:focus {
outline: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-12 navbar-0">
<div class="col-10 col-container col-center-block navbar-1">
<div class="colom col-3 home"><strong>HOME</strong></div>
<div class="colom col-3 dropdown aanbod">
<button onclick="myFunction()" class="dropbtn">ONS AANBOD</button>
<div id="myDropdown" class="dropdown-content col-12">
WebDesign
Retoucheren
</div>
</div>
<div class="colom col-3 dropdown2 portfolio">
<button onclick="myFunction2()" class="dropbtn2">PORTFOLIO</button>
<div id="myDropdown2" class="dropdown-content2 col-12">
Websites
Retoucheringen
</div>
</div>
<div class="colom col-3 dropdown spelers">
<button onclick="myFunction3()" class="dropbtn3">SPELERS</button>
<div id="myDropdown3" class="dropdown-content3 col-12">
A-Kern
B-Kern
</div>
</div>
<div class="colom col-3 contact"><strong>CONTACT</strong></div>
</div>
</div>
You are calling myFunction3 but not defined you have to create myFunction3 in
js.
function myFunction3() {
document.getElementById("myDropdown3").classList.toggle("show");
}
Appreciate if useful.
Your onClick buttons should be ...
<button onclick="myFunction('myDropdown')" class="dropbtn">ONS AANBOD</button>
<button onclick="myFunction('myDropdown2')" class="dropbtn">PORTFOLIO</button>
<button onclick="myFunction('myDropdown3')" class="dropbtn">SPELERS</button>
... and your function myFunction should look like this:
function myFunction(id) {
document.getElementById(id).classList.toggle("show");
}
I follow this link to try to make a clickable dropdown menu.
I notice the code from the link is for one dropdown menu and I think this code is for create the dropdown menu.
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
I try to create another two dropdown menus so I copy the code above twice
2nd dropdown
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown2</button>
<div id="myDropdown" class="dropdown-content">
Home2
About2
Contact2
</div>
</div>
3rd dropdown
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown3</button>
<div id="myDropdown" class="dropdown-content">
Home2
About2
Contact2
I don't edit anything inside the tag and tag so I click Run on link to see the result.
Only the first dropdown menu (the original one) can show the menu, the other two dropdown menu do not show anything.
I guess the reason is the second dropdown menu and the third dropdown menu do not have proper content inside the and tag.
So I start to modify the code in and tag.
Here is the full code the I added for the second dropdown and the third dropdown menu.
<!DOCTYPE html>
<html>
<head>
<style>
/*1st dropdown*/
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
/*2nd dropdown*/
.dropbtn2 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn2:hover, .dropbtn2:focus {
background-color: #3e8e41;
}
.dropdown2 {
position: relative;
display: inline-block;
}
.dropdown-content2 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content2 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown2 a:hover {background-color: #f1f1f1}
.show2 {display:block;}
/*3rd dropdown*/
.dropbtn3 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn3:hover, .dropbtn2:focus {
background-color: #3e8e41;
}
.dropdown3 {
position: relative;
display: inline-block;
}
.dropdown-content3 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content3 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown3 a:hover {background-color: #f1f1f1}
.show3 {display:block;}
</style>
</head>
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
1st dropdown
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
2nd dropdown
<div class="dropdown2">
<button onclick="myFunction2()" class="dropbtn2">Dropdown2</button>
<div id="myDropdown2" class="dropdown-content2">
Home2
About2
Contact2
</div>
</div>
3rd dropdown
<div class="dropdown3">
<button onclick="myFunction3()" class="dropbtn3">Dropdown3</button>
<div id="myDropdown3" class="dropdown-content3">
Home3
About3
Contact3
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown 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');
}
}
}
}
//for 2nd dropdown
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show2");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn2')) {
var dropdowns = document.getElementsByClassName("dropdown-content2");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show2')) {
openDropdown.classList.remove('show2');
}
}
}
}
//for 3rd dropdown
function myFunction3() {
document.getElementById("myDropdown3").classList.toggle("show3");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn3')) {
var dropdowns = document.getElementsByClassName("dropdown-content3");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show3')) {
openDropdown.classList.remove('show3');
}
}
}
}
</script>
</body>
</html>
When I run the code, all buttons can open the dropdown menu when clicked. However, when I click outside of the dropdown menus, only the third button can close the dropdown menu, the first and the second button still open the dropdown menu.
Here are my questions.
Copy another two sets of code for create another two dropdown menu seems not a good practice as the code will become messy, not good for debug and even if there is an update, I have change the code multiple times.
However, if don't copy another two sets of code, the other two dropdown menu will not work.
Even I copy another two sets of code for create another two dropdown menu, I don't understand the dropdown menus do not close when the mouse click outside of them.
Grateful for your advice please. Thank you.
You are overriding three times window.onclick event function. Only the last function launches. If you combine the three functions in one, it works.
Your code now:
<!DOCTYPE html>
<html>
<head>
<style>
/*1st dropdown*/
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
/*2nd dropdown*/
.dropbtn2 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn2:hover, .dropbtn2:focus {
background-color: #3e8e41;
}
.dropdown2 {
position: relative;
display: inline-block;
}
.dropdown-content2 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content2 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown2 a:hover {background-color: #f1f1f1}
.show2 {display:block;}
/*3rd dropdown*/
.dropbtn3 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn3:hover, .dropbtn2:focus {
background-color: #3e8e41;
}
.dropdown3 {
position: relative;
display: inline-block;
}
.dropdown-content3 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content3 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown3 a:hover {background-color: #f1f1f1}
.show3 {display:block;}
</style>
</head>
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
1st dropdown
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
2nd dropdown
<div class="dropdown2">
<button onclick="myFunction2()" class="dropbtn2">Dropdown2</button>
<div id="myDropdown2" class="dropdown-content2">
Home2
About2
Contact2
</div>
</div>
3rd dropdown
<div class="dropdown3">
<button onclick="myFunction3()" class="dropbtn3">Dropdown3</button>
<div id="myDropdown3" class="dropdown-content3">
Home3
About3
Contact3
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
//for 2nd dropdown
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show2");
}
//for 3rd dropdown
function myFunction3() {
document.getElementById("myDropdown3").classList.toggle("show3");
}
// Close the dropdown 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');
}
}
}
if (!event.target.matches('.dropbtn2')) {
var dropdowns = document.getElementsByClassName("dropdown-content2");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show2')) {
openDropdown.classList.remove('show2');
}
}
}
if (!event.target.matches('.dropbtn3')) {
var dropdowns = document.getElementsByClassName("dropdown-content3");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show3')) {
openDropdown.classList.remove('show3');
}
}
}
}
</script>
</body>
</html>
So my first stab at web development is proceeding reasonably well.
However... I want to have two separate drop down menus, but the JavaScript functions are interfering with each other... That is, if both functions are active at the same time, clicking on one drop down will cause the other drop down to react or stop working. It is probably something massively stupid, but I have little time left. here is the code:
//Control sliding menu on screens smaller than a specified breakpoint.
(function(menu_button, links, breakpoint)
{
"use strict";
var menulink = document.getElementById(menu_button),
menu = document.getElementById(links);
menu.className = "start";
setTimeout(function()
{
menu.className = "collapsed";
}, 20);
menuLink.onclick = function()
{
if (menu.className === "displayed")
{
menu.className = "collapsed";
}
else
{
menu.className = "displayed";
}
return false;
};
window.onresize = function()
{
if (window.innerWidth < breakpoint)
{
menu.className = "collapsed";
}
};
})("menuLink", "navLinks", 700);
That was function No.1, here is No.2:
function dropFunction()
{
"use strict";
document.getElementById("myDropdown").classList.toggle("drop");
}
window.onclick = function(e)
{
"use strict";
if (!e.target.matches('.dropbtn'))
{
var dropdowns = document.getElementsByClassName("dropdownContent");
for (var d = 0; d < dropdowns.length; d++)
{
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains("drop"))
{
openDropdown.classList.remove("drop");
}
}
}
}
and HTML if at all usefull:
<nav>
<p id="menuLink">MENU</p>
<ul class="displayed" id="navLinks">
<li>Home</li>
<li>Portfolio</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
<div class="dropdownContent" id="myDropdown">
<img class="externalLink" src="images/faceBook.png" style="width:20px">
<img class="externalLink" src="images/linkedIn.png" style="width:20px">
<img class="externalLink" src="images/soundCloud.png" style="width:20px">
</div>
and CSS:
.nav
{
display: inline;
position: absolute;
bottom: 220px;
padding-right: 60px;
width: 100%;
background-color: transparent;
font-family: "verdana";
font-size: 20px;
text-align: center;
}
.nav li
{
display: inline;
}
.nav a
{
display: inline-block;
padding: 50px;
text-decoration: none;
color: #E4E4E4;
}
.nav a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
.nav a:active
{
color: #5B4CA8;
}
li.drops
{
display: inline-block;
}
.dropdownContent
{
display: none;
position: absolute;
background-color: transparent;
box-shadow: none;
minimum-width: 20px;
}
.dropdownContent a
{
color: transparent;
text-decoration: none;
display: block;
text-align: center;
}
.drop
{
display: block;
}
#menuLink
{
width: 100%;
background-color: transparent;
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
#menuLink a
{
text-decoration: none;
font-family: "helvetica";
color: #E4E4E4;
}
#menuLink a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
#menuLink a:active
{
color: #5B4CA8;
}
#navLinks
{
position: absolute;
list-style-type: none;
width: 100%;
background-color: transparent;
padding: 0;
margin: 0;
text-align: center;
z-index: 1;
opacity: 1;
-webkit-transition: all ease-out 0.5s;
transition: all ease-out 0.5s;
}
#navLinks a
{
display: block;
padding: 10px;
font-family: "helvetica";
color: #E4E4E4;
text-decoration: none;
font-size: 18px;
}
#navLinks a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
#navLinks a:active
{
color: #5B4CA8;
}
#navLinks.start
{
display: none;
}
#navLinks.collapsed
{
top: -12em;
opacity: 0;
}
Thanks for your help!
You have used the window.Onlcick event to specify behaviors for the dropdowns if the user is not clicking on something with class "drop". This event will fire if you click on any item in that window because events bubble up like that in JavaScript.