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();
});
});
Related
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>
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>
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');
}
}
}
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 10px;
font-size: 10px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
pointer-events: all;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1200;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd; display: block;}
.show {display: block;}
<script src="https://use.fontawesome.com/releases/v5.11.2/js/all.js" data-auto-replace-svg="nest"></script>
<body>
<div id="dropdown">
<button class="dropbtn fas fa-bars fa-2x" onclick="myFunction()" style="visibility: visible;"></button>
<div id="myDropdown" class="dropdown-content">
DROPDOWN CONTENT
DROPDOWN CONTENT
DROPDOWN CONTENT
</div>
</div>
</body>
Dear stackoverflow, I am currently coding a top nav bar, with this menu drop-down button, this code works fine, however when clicking the WHITE part of the font awesome icon, it does not trigger the javascript event.
Is there any way to make the menu icon clickable too? or let it be invisible to mouse pointer events.
thank you x
The problem with your current code is that the icon is rendered as a svg within the button. This is an independent element and the onclick attribute does not apply to it.
The best way to solve this is to explicitly set the pointer-events to none for the icon SVG:
.dropbtn > svg {
pointer-events: none
}
The pointer-events property dictates how the UI should respond to events on the object. By setting it to none, we are saying that this object does not process events and they are therefore passed to the object underneath the SVG.
The working snippet showing this can be seen below.
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');
}
}
}
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 10px;
font-size: 10px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
pointer-events: all;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1200;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd; display: block;}
.show {display: block;}
.dropbtn > svg {
pointer-events: none
}
<script src="https://use.fontawesome.com/releases/v5.11.2/js/all.js" data-auto-replace-svg="nest"></script>
<body>
<div id="dropdown">
<button class="dropbtn fas fa-bars fa-2x" onclick="myFunction()" style="visibility: visible;"></button>
<div id="myDropdown" class="dropdown-content">
DROPDOWN CONTENT
DROPDOWN CONTENT
DROPDOWN CONTENT
</div>
</div>
</body>
I mean this could be a simple solution or i might be wrong but this might work. Putting this css code on the menu icon:
pointer-events: none;
Hopefully this helps.
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();
}
I am trying to make a DROPDOWN list from this tutorial. The functions seem to work very good, but it doesnt get the CSS.
this is what it looks.
Since the refreshes the page when its pressed. I tried to add it as a but still the same problem, the CSS does not get implemented.
any suggestion?
this is the snipped code:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
About
Base
Blog
Contact
Custom
Support
Tools
</div>
</div>
Whats the problem here? I cant figure it out.
Maybe problem of css in separate file, that in line
.dropdown a:hover
after background-color property value missing semicolon?