I am using a dropdown menu code as given below. The code worked fine when the image for menu was used normally. However, I wish to place the dropdown menu relatively, to flow right the menu icon even when browser window is resized (responsive web design). So i wrapped the image element in a div element so I could use absolute and relative attributes to position them. But once I wrap the image in the div element, the javascript somehow stops working. Display of dropdown menu remains none.
HTML
Javascript
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").style="display:block";
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.menu')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.style="display:block") {
openDropdown.style="display:none";
}
}
}
}
</script>
Inside the body
<div class="header">
<h1 class="title">Hello </h1>
<div class="dragon-logo">
<img id="dragon-img" src="pathtomascot.svg" />
</div>
<div class="menu">
<img onclick="myFunction()" src="pathtomenuicon.svg">
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
CSS
/*For the menu icon*/
.menu {
display: block;
position: absolute;
z-index: 0;
height:55px; /* 150/640 */
width:55px;/*150/1536*/
top: 2.5%;
right: 10.0208333333%;
float: right;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.menu:hover, .menu:focus {
background-color: #3e8e41;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
margin-top:
margin-left: 69%;
background-color: #f9f9f9;
min-width: 11%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 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}
On your window.onclick handler, you are setting the handler to ignore clicks on .menu instead of the image where your actual click will trigger. hence the window.
Add an id to your img named menu_img and
change this
if (!event.target.matches('.menu'))
to
if (!event.target.matches('#menu_img'))
Snippet below
/*For the menu icon*/
.menu {
display: block;
position: absolute;
z-index: 0;
height: 55px;
/* 150/640 */
width: 55px;
/*150/1536*/
top: 2.5%;
right: 10.0208333333%;
float: right;
cursor: pointer;
}
#menu_img{
width:50px;
height:50px;
}
/* Dropdown button on hover & focus */
.menu:hover,
.menu:focus {
background-color: #3e8e41;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
margin-top: margin-left: 69%;
background-color: #f9f9f9;
min-width: 11%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 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
}
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").style = "display:block";
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('#menu_img')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.style = "display:block") {
openDropdown.style = "display:none";
}
}
}
}
</script>
Inside the body
<div class="header">
<h1 class="title">Hello </h1>
<div class="dragon-logo">
<img id="dragon-img" src="pathtomascot.svg" />
</div>
<div class="menu">
<img id="menu_img" onclick="myFunction()" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRglT3Ib_vLAUHw92-ShYB4h7S0meWdH5l56XM1v4hdoJw2PCTdFg">
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
I believe your issue stems from the fact that your event.target is not always what you expect it to be. As a result the window.onclick function would immediately execute when you opened the drop down menu and negate myFunction().
What I did was add a new class, dropdown-open to all the elements that you could click on where you would not want to close the dropdown menu. If you check for that class instead of menu it works.
Hope that helps.
<div class="header">
<h1 class="title">Hello </h1>
<div class="dragon-logo">
<img id="dragon-img" src="pathtomascot.svg" />
</div>
<div class="menu dropdown-open">
<img onclick="myFunction()" src="pathtomenuicon.svg" class="dropdown-open">
<div id="myDropdown" class="dropdown-content dropdown-open">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").style.display = "block";
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropdown-open')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.style="display:block") {
openDropdown.style="display:none";
}
}
}
}
</script>
Related
Based on this post - How to open dropdown button by clicking on text?
I'm trying to add this dropdown effect when you hover the link "tools" in addition to this script but with any success (I would like to keep onclick at the same time). Someone could help me on this ? I'm sure it's quite easy but I'm very not an expert in JS sorry. Spent some hours without finding any solution :(
Many thanks for the help.
JS:
/* 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');
}
}
}
}
I tried to add this -
document.getElementByClassName(".dropbtn").onmouseenter = function(){
document.getElementByClassName("dropdown-content").classList.contains("show");
}
CSS
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
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;
}
button.dropbtn{
font-weight: 700;
background:none;
border:none;
padding:0;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
HTML
<div>
<button onclick="myFunction()" class="dropbtn">Tools</button>
<ul id="myDropdown" class="dropdown-content">
<li>Blok 1</li>
<li>Blok 1</li>
<li>Blok 1</li>
</ul>
</div>
Hover event can be handled with mouseenter event
I have also included mouseleave event which can be used to do something on mouse leave event.
/* 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');
}
}
}
}
$(".dropbtn").on({
mouseenter: function () {
document.getElementById("myDropdown").classList.toggle("show");
},
//mouseleave: function () {
//do something on mouse pointer leave event
//}
});
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
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;
}
button.dropbtn{
font-weight: 700;
background:none;
border:none;
padding:0;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="column-outlet">
<button onclick="myFunction()" class="dropbtn">Tools</button>
<ul id="myDropdown" class="dropdown-content">
<li class="force-css">Blok 1</li>
<li class="force-css">Blok 1</li>
<li class="force-css">Blok 1</li>
</ul>
</div>
PS: This is a modified answer. Credits to Uncoke for original answer at How to open dropdown button by clicking on text?
i have a button, on which hen user clicks dropdown appears, the code for it is like below:
/* 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('.btn.btn-primary')) {
var dropdowns = document.getElementsByClassName("dropdowni-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.dropdowni {
position: relative;
display: inline-block;
}
.dropdowni-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 120px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdowni-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdowni a:hover {
background-color: #00bfff;
}
.show {
display: block;
}
<div class="dropdowni">
<button type="button" onclick="myFunction()" class="btn btn-primary">Log In</button>
<div id="myDropdown" class="dropdowni-content">
Admin
Member
</div>
</div>
this gives me something like below image
i want the size of the content in dropdown to be smaller as it is big right now, i tried setting the height of content and height of the a tag, but nothing is working, when i change the height of a tag, the text is going below, can anyone tell me what is wrong in my code
I checked your code. Apparently, it's ok. Change Padding instead.
Try:
padding: 5px 10px; //first-one(5px) for top and bottom;
// Second-one(10px) for left and right. Let me know if it works, Good luck.
I have attempted to implement the method of opening and closing a drop-down using Javascript via this tutorial on w3schools.com. While the function to "show" the drop-down works, the one to close it does not. Furthermore, there is no explanation alongside this code to explain why it should work, making it difficult to debug.
/* 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 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');
}
}
}
}
My questions are, therefore,
1) whether the code in the tutorial should work for the purpose of closing the drop-down. (ANSWERED)
2) Could someone please clarify how/why this should work, for the sake of clarity for myself and future newbies who make come across the same tutorial and issue? (UNANSWERED)
Edit (MY ATTEMPT):
HTML:
<div class="sharedown">
<p onclick="shareVis()" class="sharebtn">  Share</p>
<div id="mySharedown" class="sharedown-content">
Self
<p>User</p><input type="text" name="user-name" placeholder="Share to">
Community
</div>
</div>
JS:
function shareVis() {
document.getElementById("mySharedown").className = "show";
}
window.onclick = function(event) {
if (!event.target.matches('sharebtn')) {
var sharedowns = document.getElementsByClassName("sharedown-content");
var i;
for (i = 0; i < sharedowns.length; i++) {
var openSharedown = sharedowns[i];
if (openSharedown.classList.contains('show')) {
openSharedown.classList.remove('show');
}
}
}
}
CSS:
/* Share dropdown menu */
p.sharebtn {
color: darkgrey;
font-family:calibri;
padding: 0px;
margin: 0px;
font-size: 12;
border: none;
cursor: pointer;
display: inline;
}
/* Dropdown button on hover & focus */
p.sharebtn:hover, p.sharebtn:focus {
color: grey;
}
/* The container <div> - needed to position the dropdown content */
.sharedown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.sharedown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 100px;
box-shadow: 0 2px 4px 1px #C4E3F5;
z-index:1; /* place dropdown infront of everything else*/
}
.sharedown-content a {
color: black;
padding: 5px 5px;
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;
position: absolute;
background-color: #f1f1f1;
min-width: 100px;
box-shadow: 0 2px 4px 1px #C4E3F5;
opacity: 1;
z-index:1;}
The issue lies in shareVis function. Here
document.getElementById("mySharedown").className = "show";
you are replacing #mySharedown class name to show. Then in window.onclick
var sharedowns = document.getElementsByClassName("sharedown-content");
you are not getting any sharedowns as you already replaced the class name to show.
You can either add show class into classList
document.getElementById("mySharedown").classList.add("show");
or replace the class name with sharedown-content show
document.getElementById("mySharedown").className = "sharedown-content show";
Working solution below:
function shareVis() {
//document.getElementById("mySharedown").className = "sharedown-content show";
document.getElementById("mySharedown").classList.add("show");
}
window.onclick = function(event) {
if (!event.target.matches('.sharebtn')) {
var sharedowns = document.getElementsByClassName("sharedown-content");
var i;
for (i = 0; i < sharedowns.length; i++) {
var openSharedown = sharedowns[i];
if (openSharedown.classList.contains('show')) {
openSharedown.classList.remove('show');
}
}
}
}
document.getElementById("mySharedown").addEventListener('click',function(event){
event.stopPropagation();
});
#mySharedown{
display: none;
border: 1px solid black;
}
#mySharedown.show {
display: block;
}
<div class="sharedown">
<p onclick="shareVis()" class="sharebtn">  Share</p>
<div id="mySharedown" class="sharedown-content">
Self
<p>User</p><input type="text" name="user-name" placeholder="Share to">
Community
</div>
</div>
Update
To prevent the second click within #mySharedown from hiding #mySharedown, you should add another click event for #mySharedown and prevent it from bubbling up, like this
document.getElementById("mySharedown").addEventListener('click',function(event){
event.stopPropagation();
});
Updates are included in the working solution
Update 2022
Vanilla Javascript now contains a mehtod called Node.closest(Node) to check if the event matches the node in the upper hierarchy. below is an example to open the dropdown menu on click and hide it again on click and if clicking outside the document will also hide the dropdown menu.
const list = document.querySelector('.list')
const btn = document.querySelector('.btn')
btn.addEventListener('click', (e)=> {
list.classList.toggle('hidden')
e.stopPropagation()
})
document.addEventListener('click', (e)=> {
if(e.target.closest('.list')) return
list.classList.add('hidden')
})
.hidden {
display:none
}
ul {
background-color: blue;
}
<button class="btn">open</button>
<ul class="list hidden">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
Here I leave another "short" example that I implemented to my own code, but is easy to understand.
.tw-hidden is a class "display: none"
window.onclick = function(event) {
let customDropdownsEl = document.querySelectorAll(".custom-dropdown");
let liContainerEl = event.target.querySelector(".custom-dropdown");
customDropdownsEl.forEach(el => el.parentNode !== event.target && !el.classList.contains("tw-hidden") && el.classList.add("tw-hidden"));
event.target.matches('.custom-dropdown-container') && liContainerEl.classList.toggle("tw-hidden");
}
The example is fully functional and should work. Copy the following code below:
/* 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');
}
}
}
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.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: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
I have a simple drop-down menu using JavaScript.
<div id="show-nav" class="dropdown">
<div id="dropdown" onClick="myFunction()">Menu Name</div>
<div id="myDropdown" class="dropdown-content">
Option 1
Option 2
Option 3
</div>
</div>
And the JS:
<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 menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('#dropdown')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
I have multiple copies of the same menu in several adjacent divs. With this code, the menu works in the first element, but if I try to toggle it in the second, it only drops down in the first. How can I make this work for several menus on a single page?
To the myFunction pass this. That is:
<div id="dropdown" onClick="myFunction(this)">Menu Name</div>
Write a JavaScript function like below:
function myFunction(a) {
a.parentNode.getElementsByClassName("dropdown-content")[0].classList.toggle("show");
}
No need of that much of JavaScript: keep as simple as possible.
You need two changes on your code :
Make all buttons' onClick attributes same. (I guess it is "myFunction();")
Change your handler to process the button which is actually clicked.
This is possible with event.target :
function myFunction(event) {
event.target.classList.toggle("show");
}
You can simply do this without written any long javascript code.
use this
<div id="show-nav" class="dropbtn">
<div id="dropdown" onClick="myFunction(this)">Menu Name</div>
<div id="myDropdown" class="dropdown-content">
Option 1
Option 2
Option 3
</div>
</div>
<div id="show-nav" class="dropbtn" style="margin-left:300px; margin-top:-16px;">
<div id="dropdown" onClick="myFunction(this)">Menu Name</div>
<div id="myDropdown" class="dropdown-content">
Option 1
Option 2
Option 3
</div>
</div>
function myFunction(a) {
a.parentNode.getElementsByClassName('dropdown-content')[0].classList.toggle("show");
}
.dropdown {
position: absolute;
right:5%;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
background-color: #f9f9f9;
min-width: 50px;
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;
}
.show {
display: block;
}
I followed a tutorial on W3Schools website about making a dropdown menu from a button. Everything works fine EXCEPT that when the user clicks inside the dropdown menu the menu itself disappears.
I wanted to make a LOGIN button where the user clicks on the button, it displays a dropdown menu where he/she can input his/her username and password and click Login.
I want to keep the feature where if the user clicks any other area outside the drop down menu, it would automatically close the drop down menu.
My problem is that the dropdown menu disappears when the user clicks any area inside it. How do I prevent it from disappearing while clicking inside the drop down menu using only JavaScript? What about using jQuery (I'm not really familiar with jQuery yet)
/* 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 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');
}
}
}
}
/* 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);
}
/* Contents inside the dropdown */
.dropdown-content input, .dropdown-content button {
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;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">LOG IN</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" name="username" placeholder="Enter username"/>
<input type="text" name="password" placeholder="Enter password"/>
<button type="submit" name="submit">Submit</button>
</div>
</div>
On window.onClick handler, we add a condition to exclude "dropdown content" and its children.
/* 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 menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
// [BEGIN][Here is the condition]
if (event.target.matches('.dropdown-content') || event.target.matches('.dropdown-content *') ) {
event.stopPropagation();
return;
}
// [END][Here is the condition]
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');
}
}
}
}
/* 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);
}
/* Contents inside the dropdown */
.dropdown-content input, .dropdown-content button {
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;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">LOG IN</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" name="username" placeholder="Enter username"/>
<input type="text" name="password" placeholder="Enter password"/>
<button type="submit" name="submit">Submit</button>
</div>
</div>
When you click inside dropdown,
you should not remove show class
/* 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 menu if the user clicks outside of it
window.onclick = function(event) {
if (event.target.matches('.dropdown-content *')) {
return;
}
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');
}
}
}
}
/* 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);
}
/* Contents inside the dropdown */
.dropdown-content input, .dropdown-content button {
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;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">LOG IN</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" class="form-input" name="username" placeholder="Enter username"/>
<input type="text" class="form-input" name="password" placeholder="Enter password"/>
<button type="submit" name="submit">Submit</button>
</div>
</div>