This is almost working as intended, the drop downs do close when clicking on the screen but they stay open when opening up a new drop down. I would like it so that it also closes the open drop down when opening up a new one. What would I have to change in the script in order to make it do that? Thank you in advance.
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function myFunction(event) {
event.stopPropagation();
document.getElementById("myDropdown").classList.toggle("show");
}
function myFunction2(event) {
event.stopPropagation();
document.getElementById("myDropdown2").classList.toggle("show");
}
function myFunction3(event) {
event.stopPropagation();
document.getElementById("myDropdown3").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
document.getElementById("myDropdown").classList.remove("show");
document.getElementById("myDropdown2").classList.remove("show");
document.getElementById("myDropdown3").classList.remove("show");
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
/* 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: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* 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: #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;
}
/* Dropdown Button */
.dropbtn2 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn2:hover,
.dropbtn2:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown2 {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content2 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* Links inside the dropdown */
.dropdown-content2 a {
color: black;
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;
}
/* Dropdown Button */
.dropbtn3 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn3:hover,
.dropbtn3:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown3 {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content3 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* Links inside the dropdown */
.dropdown-content3 a {
color: black;
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;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table>
<tr>
<td>
<div class="dropdown">
<button onclick="myFunction(event)" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</td>
<td>
<div class="dropdown2">
<button onclick="myFunction2(event)" class="dropbtn2">Dropdown2</button>
<div id="myDropdown2" class="dropdown-content2">
Link 4
Link 5
Link 6
</div>
</div>
</td>
<td>
<div class="dropdown3">
<button onclick="myFunction3(event)" class="dropbtn3">Dropdown3</button>
<div id="myDropdown3" class="dropdown-content3">
Link 7
Link 8
Link 9
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
You can use classList.remove inside myFunctions to remove class show from the other divs.
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function myFunction(event) {
event.stopPropagation();
document.getElementById("myDropdown").classList.toggle("show");
document.getElementById("myDropdown2").classList.remove("show");
document.getElementById("myDropdown3").classList.remove("show");
}
function myFunction2(event) {
event.stopPropagation();
document.getElementById("myDropdown2").classList.toggle("show");
document.getElementById("myDropdown").classList.remove("show");
document.getElementById("myDropdown3").classList.remove("show");
}
function myFunction3(event) {
event.stopPropagation();
document.getElementById("myDropdown3").classList.toggle("show");
document.getElementById("myDropdown").classList.remove("show");
document.getElementById("myDropdown2").classList.remove("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
document.getElementById("myDropdown").classList.remove("show");
document.getElementById("myDropdown2").classList.remove("show");
document.getElementById("myDropdown3").classList.remove("show");
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
/* 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: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* 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: #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;
}
/* Dropdown Button */
.dropbtn2 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn2:hover,
.dropbtn2:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown2 {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content2 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* Links inside the dropdown */
.dropdown-content2 a {
color: black;
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;
}
/* Dropdown Button */
.dropbtn3 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn3:hover,
.dropbtn3:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown3 {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content3 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* Links inside the dropdown */
.dropdown-content3 a {
color: black;
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;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table>
<tr>
<td>
<div class="dropdown">
<button onclick="myFunction(event)" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</td>
<td>
<div class="dropdown2">
<button onclick="myFunction2(event)" class="dropbtn2">Dropdown2</button>
<div id="myDropdown2" class="dropdown-content2">
Link 4
Link 5
Link 6
</div>
</div>
</td>
<td>
<div class="dropdown3">
<button onclick="myFunction3(event)" class="dropbtn3">Dropdown3</button>
<div id="myDropdown3" class="dropdown-content3">
Link 7
Link 8
Link 9
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Try this.
function myFunction(event) {
event.stopPropagation();
document.getElementById("myDropdown2").classList.remove("show");
document.getElementById("myDropdown3").classList.remove("show");
document.getElementById("myDropdown").classList.toggle("show");
}
function myFunction2(event) {
event.stopPropagation();
document.getElementById("myDropdown3").classList.remove("show");
document.getElementById("myDropdown").classList.remove("show");
document.getElementById("myDropdown2").classList.toggle("show");
}
function myFunction3(event) {
event.stopPropagation();
document.getElementById("myDropdown2").classList.remove("show");
document.getElementById("myDropdown").classList.remove("show");
document.getElementById("myDropdown3").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
document.getElementById("myDropdown").classList.remove("show");
document.getElementById("myDropdown2").classList.remove("show");
document.getElementById("myDropdown3").classList.remove("show");
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
/* 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: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* 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: #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;
}
/* Dropdown Button */
.dropbtn2 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn2:hover,
.dropbtn2:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown2 {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content2 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* Links inside the dropdown */
.dropdown-content2 a {
color: black;
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;
}
/* Dropdown Button */
.dropbtn3 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn3:hover,
.dropbtn3:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown3 {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content3 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* Links inside the dropdown */
.dropdown-content3 a {
color: black;
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div class="dropdown">
<button onclick="myFunction(event)" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</td>
<td>
<div class="dropdown2">
<button onclick="myFunction2(event)" class="dropbtn2">Dropdown2</button>
<div id="myDropdown2" class="dropdown-content2">
Link 4
Link 5
Link 6
</div>
</div>
</td>
<td>
<div class="dropdown3">
<button onclick="myFunction3(event)" class="dropbtn3">Dropdown3</button>
<div id="myDropdown3" class="dropdown-content3">
Link 7
Link 8
Link 9
</div>
</div>
</td>
</tr>
</table>
Create a simple function that clears all the dropdowns, and fire it before showing each dropdown, as well as clicking on window.
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function myFunction(event) {
event.stopPropagation();
closeDropdowns();
document.getElementById("myDropdown").classList.toggle("show");
}
function myFunction2(event) {
event.stopPropagation();
closeDropdowns();
document.getElementById("myDropdown2").classList.toggle("show");
}
function myFunction3(event) {
event.stopPropagation();
closeDropdowns();
document.getElementById("myDropdown3").classList.toggle("show");
}
function closeDropdowns(){
document.getElementById("myDropdown").classList.remove("show");
document.getElementById("myDropdown2").classList.remove("show");
document.getElementById("myDropdown3").classList.remove("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
closeDropdowns();
}
Related
Please help me how to stop the hover effect. I want a Javascript or Jquery code to stop hover after clicking the values and the list of value will stay. And for the "x" button(close), it will close list of value and reset back to hover.
Thanks in advance.
CSS:
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.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 .close{
float:right;
cursor: pointer;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<div class="close">x</div>
Value 1
Value 2
Value 3
</div>
</div>
You can use the mouseover and mouseout events to simulate a hover.
So:
document.getElementById('dropbtn').addEventListener('mouseover', ()=>document.getElementById('dropdown-content').style.display = 'blobk')
document.getElementById('dropbtn').addEventListener('mouseout', ()=>document.getElementById('dropdown-content').style.display = 'none')
You can remove all CSS hover and use jquery to open the dropdown on the click button and close it on click time
$(()=> {
const dropOpen = $('.dropbtn');
const dropClose = $('.dropdown-content .close');
dropOpen.on('click', function() {
$(this).next().fadeIn();
});
dropClose.on('click', function() {
$(this).parent().fadeOut();
});
});
I have a simple dropdown menu on a page. Clicking it triggers a JavaScript function. Code here:
function myBrandDropdown() {
document.getElementById("myDropdown").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");
}
}
}
};
.dropbtn {
background-color: transparent;
padding: 10px;
font-size: 1.4rem;
border: none;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
cursor: pointer;
}
/* Dropdown button on hover*/
.dropbtn:hover {
border: none;
text-decoration: none;
}
/* Dropdown button on focus */
.dropbtn:focus {
background-color: #293241;
border: none;
text-decoration: none;
color: #fff;
}
/* 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: #293241;
min-width: 160px;
color: #fff;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #fff;
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;
}
<div class="dropdown">
<button onclick="myBrandDropdown()" class="dropbtn">
Brand name ▾
</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Up to this point everything works fine.
However I wanted to add some underline styling to the text within the button, but with more control than a simple underline text decoration. So I wrapped the text in a span, and gave that the style I wanted. See here:
Updated HTML
<div class="dropdown">
<button onclick="myBrandDropdown()" class="dropbtn">
<span class="dropbtnunderline">Brand name</span>
▾
</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
New CSS
.dropbtnunderline {
display: inline-block;
border-bottom: 3px solid #e63946;
padding-bottom: 2px;
padding-top: 5px;
}
Since adding the span, the button no longer triggers correctly. It looks exactly as I wanted, and clicking the space around the text triggers correctly, but clicking on the text itself does nothing.
What is it that's caused this, and can I easily fix it?
The simplest possible solution would be to add pointer-events: none as a style to the span.
I'm not super familiar with JS. I used the W3Schools tutorial for creating an on-click dropdown menu as a reference and added a second menu. However, only the second dropdown menu listed in the javascript maintains the functionality of closing when the user clicks outside the dropdown. (I can switch the order of the functions listed in the JS, and changing nothing else, that switches which menu has that close-when-click-outside functionality.)
Can anyone help me understand why that is? How to fix it would be a bonus but mostly I just don't get why it works for one menu and not the other.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function drop1() {
document.getElementById("drop1").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn1')) {
var drop1 = document.getElementById("drop1");
if (drop1.classList.contains('show')) {
drop1.classList.remove('show');
}
}
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function drop2() {
document.getElementById("drop2").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn2')) {
var drop2 = document.getElementById("drop2");
if (drop2.classList.contains('show')) {
drop2.classList.remove('show');
}
}
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropbtn1,
.dropbtn2 {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn1" onclick="drop1()">Dropdown
+
</button>
<div class="dropdown-content" id="drop1">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn2" onclick="drop2()">Dropdown 2
+
</button>
<div class="dropdown-content" id="drop2">
Link 4
Link 5
Link 6
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</p>
Thank you!
You are only allowed to have one onclick.
The second will overwrite the first
Instead use eventListener and delegation
Notice I removed the inline click and I now only have one class instead of a class per button
window.addEventListener("load", function() {
// click the dropdown if the user clicks outside it unless that is a button
document.addEventListener("click", function(e) {
const tgt1 = e.target.closest('.dropdown-content');
const tgt2 = e.target.closest('.dropbtn');
if (!tgt1 && !tgt2) {
document.querySelectorAll('.dropdown-content').forEach(div => div.classList.remove('show'));
}
})
document.querySelector(".navbar").addEventListener("click", function(e) {
const tgt = e.target.closest("button");
if (tgt && tgt.matches('.dropbtn')) {
document.querySelectorAll('.dropdown-content').forEach(div => div.classList.remove('show'));
document.getElementById(tgt.dataset.id).classList.add('show');
}
})
})
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn" data-id="drop1">Dropdown
+
</button>
<div class="dropdown-content" id="drop1">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn" data-id="drop2">Dropdown 2
+
</button>
<div class="dropdown-content" id="drop2">
Link 4
Link 5
Link 6
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</p>
📌 Can anyone help me understand why that is? How to fix it would be a bonus but mostly I just don't get why it works for one menu and not the other.
✨ I'm going to make the smallest possible change to your code to make it work, so that you can best learn what happened. I'm not going to redesign your approach.
window.onclick is a variable, and you are assigning a value to it twice. The second function you assign it, for Dropdown 2, overwrites the first, which was for Dropdown 1.
The problem is easily solved by combining the logic into one function assigned to window.onclick as below.
Another simple, and probably better fix, is to use window.addEventListener("click", function(event) { }) rather than window.onclick.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function drop1() {
document.getElementById("drop1").classList.toggle("show");
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function drop2() {
document.getElementById("drop2").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn1')) {
var drop1 = document.getElementById("drop1");
if (drop1.classList.contains('show')) {
drop1.classList.remove('show');
}
}
if (!e.target.matches('.dropbtn2')) {
var drop2 = document.getElementById("drop2");
if (drop2.classList.contains('show')) {
drop2.classList.remove('show');
}
}
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropbtn1, .dropbtn2 {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn1" onclick="drop1()">Dropdown
+
</button>
<div class="dropdown-content" id="drop1">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn2" onclick="drop2()">Dropdown 2
+
</button>
<div class="dropdown-content" id="drop2">
Link 4
Link 5
Link 6
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</p>
I am trying to add a dropdown menu so when the page is viewed on mobile the user can click and access all the pages available. I am not getting any type of error code, just no response. Below are the snippets of HTML, CSS and JavaScript that should be affecting the code. Thanks for taking the time to read through this.
/*When user clicks name on shows dropdown menu allowing for nav on smaller viewports */
function dropDown() {
document.getElementById("dropNav").classList.toggle("show");
}
//close drop down if clicked outside
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');
}
}
}
}
.dropbtn {
background-color: white;
color: #000;
padding: 8px 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover .dropbtn:focus {
background-color: #f1f1f1;
}
/* menu below button*/
.dropdown {
position: relative;
display: inline-block;
}
/* hidden dropdown, using z to plac in front of other elements */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 100px;
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: goldenrod
}
.show {
display: block;
}
<div class="dropdown">
<button onclick="dropDown()" class="dropbtn"><b>AH</b>NAME</button>
<div id="dropNav" class="dropdown-content">
Portfolio
About
Contact
Travels
Web Security Information
</div>
</div>
/*When user clicks name on shows dropdown menu allowing for nav on smaller viewports */
function dropDown(event) {
event.stopPropagation();
document.getElementById("dropNav").classList.toggle("show");
}
//close drop down if clicked outside
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');
}
}
}
}
.dropbtn {
background-color: white;
color: #000;
padding: 8px 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover .dropbtn:focus {
background-color: #f1f1f1;
}
/* menu below button*/
.dropdown {
position: relative;
display: inline-block;
}
/* hidden dropdown, using z to plac in front of other elements */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 100px;
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: goldenrod
}
.show {
display: block;
}
<div class="dropdown">
<button onclick="dropDown(event)" class="dropbtn"><b>AH</b>NAME</button>
<div id="dropNav" class="dropdown-content">
Portfolio
About
Contact
Travels
Web Security Information
</div>
</div>
So I have a left navigation bar that opens on hover and inside it a button that has dropdown content also on hover. But right now the dropdown-content is appearing below the button (inside the left-nav). I want the dropdown-content to appear beside the button, to the right of the left-nav(so outside the left-nav).
Any ideas?
<div id="mySidenav" class="sidenav" style="background-image: linear-gradient(#7C0D0D, #DC0404);">
<div class="dropdown">
<button class="dropbtn" [ngStyle]="{'color': 'white','font-style': 'bold', 'font-size': '20.01px', 'font-family':'sans-serif'}"> <img src="assets/icon-overview-white.png" style="padding-right:14px; ">Screening</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
/* The side navigation menu */
.sidenav {
height: 70%;
width: 55px;
position: fixed;
z-index:0;
top:200px;
left:0px;
right:50px;
background-color: #ff0000;
overflow-x:hidden;
padding-top: 0px;
transition: 0.5s;
}
/* ON HOVER */
.sidenav:hover {
width: 250px;
}
.sidenav normalb:hover {
background-color: #4F0909;
}
.buttonGroup {
align-content: baseline;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: #4F0909;
}
.sidenav h1 {
background-color: #850101; /* Blue background */
border: thin; /* Remove borders */
color: white; /* White text */
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
overflow:hidden;
}
.sidenav h1:hover {
background-color: #4F0909;
}
/* The navigation menu links */
.sidenav a {
padding-left:10px;
text-decoration: none;
font-size: 18px;
color: #f1f1f1;
display:block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus {
color: #f1f1f1;
}
#main {
transition: margin-left .5s;
padding: 20px;
}
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #640303;
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: #D90909;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #D60707;
}
If you are sure of the width of your left navigation bar, then you can set the left property of the .dropdown-content. Since the dropdown-content is absolute, setting the left value will shift the dropdown to the right.
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #640303;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
top:0;
left: 144px;
/* Here I have set the width (minus padding) of the dropdown-content */
}
/* 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: #D90909;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #D60707;
}
<div id="mySidenav" class="sidenav" style="background-image: linear-gradient(#7C0D0D, #DC0404);">
<div class="dropdown">
<button class="dropbtn" style="color: white;font-style: bold; font-size: 20.01px; font-family:sans-serif;"> <img src="assets/icon-overview-white.png" style="padding-right:14px; ">Screening</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>