Develop Reference

close dropdown menu if the user clicks elsewhere

this is the js code i took from w3schools.com which is suppose to toogle between hiding and showing the dropdown content and also close the dropdown menu when the user clicks elsewhere on the window. In the css i have precises the class 'show' to display:block. the website is actually in french.
//when the user click's on the menu button, toogle between hiding and showing the dropdown content
function menu() {
document.getElementById("myDropdown").classList.toggle("show")
}
// close the dropdown menu if the user clicks outside of the dropdown
window.onclick = function(event) {
if (!event.target.matches('.dropdown-btn')) {
const dropdowns = document.getElementsByClassName("dropdown-content");
let i;
for (let i = 0; i < dropdowns.length; i++) {
let openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.dropdown-menu i {
color: #ffffff;
}
.dropdown-menu span {
font-size: 2em;
color: #ffffff;
font-weight: bold;
}
button .material-icons {
font-size: 2.5em !important;
}
.dropdown-menu {
display: inline-block;
align-items: center;
box-sizing: border-box;
padding: 5px;
position: relative;
}
.menu {
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #b8b8b8;
/* min-width: 160px; */
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.show {
display: block;
}
.dropdown-btn {
background-color: black;
border: none;
display: flex;
align-items: inherit;
justify-content: center;
cursor: pointer;
}
<div class="menu">
<div class="dropdown-menu">
<button onclick="menu()" class="dropdown-btn">
<i class="material-icons">menu</i>
<span>MENU</span>
<i class="material-icons">expand_more</i>
</button>
<div class="dropdown-content" id="myDropdown">
Accuiel
À propos du coach
programmes
</div>
</div>
</div>

my dropdown button isnt clickable over the text but is clickable anywhere else on the button

I have a dropdown button called options I can click anywhere around the button and the dropdown opens but when I click along the text of the button in the middle it doesn't open, however I have used the same code on other dropdown buttons and they work just fine. this button only stopped working properly when I changed the function name in JS any help please? all the button code is below.
<div class="options-select">
<button onclick="options()" class="options-dropbtn"><span>Options</span> ▼</button>
<div id="options-Dropdown" class="options-dropdown-content">
List similar item
See similar items
View trader's other items
</div>
</div>
function options() {
document.getElementById("options-Dropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.options-dropbtn')) {
var dropdowns = document.getElementsByClassName("options-dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.options-dropbtn {
background-color: #fd886b;
color: white;
font-size: 16px;
cursor: pointer;
position: relative;
display: block;
width: 250px;
height: 50px;
border: 1px solid orangered;
left: 75px;
top: 50px;
}
.options-dropbtn:hover, .dropbtn:focus {
background-color: #f76f4d;
}
.options-dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
width: 250px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
text-align: center;
top: 302px;
left: 75px;
}
.options-dropdown-content a {
color: #818181;
padding: 12px 16px;
text-decoration: none;
display: block;
z-index: 1;
}
.options-dropdown-content a:hover {
color: white;
transition: 0.5s;
}
.options-select a:hover {background-color: orangered;}
.show {
display: block;
}

This is due to the span tag inside the button tag, and therefore the click function ( onclick="options()" ) is set on the button. Add this rule to your css:
button.options-dropbtn span {
pointer-events: none;
}
function options() {
document.getElementById("options-Dropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.options-dropbtn')) {
var dropdowns = document.getElementsByClassName("options-dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
button.options-dropbtn span {
pointer-events: none;
}
.options-dropbtn {
background-color: #fd886b;
color: white;
font-size: 16px;
cursor: pointer;
position: relative;
display: block;
width: 250px;
height: 50px;
border: 1px solid orangered;
left: 75px;
top: 50px;
}
.options-dropbtn:hover, .dropbtn:focus {
background-color: #f76f4d;
}
.options-dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
width: 250px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
text-align: center;
top: 302px;
left: 75px;
}
.options-dropdown-content a {
color: #818181;
padding: 12px 16px;
text-decoration: none;
display: block;
z-index: 1;
}
.options-dropdown-content a:hover {
color: white;
transition: 0.5s;
}
.options-select a:hover {background-color: orangered;}
.show {
display: block;
}
<div class="options-select">
<button onclick="options()" class="options-dropbtn"><span>Options</span> ▼</button>
<div id="options-Dropdown" class="options-dropdown-content">
List similar item
See similar items
View trader's other items
</div>
</div>

Hovering over Span moves image

I currently having a rounded image set in my top right corner, and I didn't have any problems until I moved it from the left to the right. If you hover over the span, it opens the nav menu but it also moves the rounded image. When not hovering it stays in the position that I please. How can I fix this?
CSS
.dropbtn {
padding: 16px;
position: relative;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
float: right;
padding: 10px;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f1f1f1;
min-width: 140px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd}
.show {display:block;}
.rounded-circle {
height: 40px;
width: 40px;
border-radius: 50%;
display: inline-block;
}
JavaScript
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
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');
}
}
}
}
HTML
<div class="dropdown">
<span onclick="myFunction()" class="dropbtn"><img class="rounded-circle avatar-align" src="/assets/fallback/default-avatar-3-9fe9418585e4df60d6d1005ccf4f0c8ee871f01710b4d10c496f45b8a0ef9305.png"> </span>
<div id="myDropdown" class="dropdown-content">
Log in
Sign up
</div>
</div>

Replace your .dropdown-content css with the below one.
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 140px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right:20px
}
Here what I updated is replaced position:relative to position:absolute and added right:20px in .dropdown-content class.
Check the working snippet.
function myFunction() {
event.stopPropagation();
const dropDown = document.getElementById("myDropdown");
dropDown.classList.contains("show") ?dropDown.classList.remove("show") :dropDown.classList.add("show");
}
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 {
padding: 16px;
position: relative;
font-size: 16px;
border: none;
z-index:99;
cursor: pointer;
}
.dropdown {
position: relative;
float: right;
padding: 10px;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 140px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right:20px
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd
}
.show {
display: block;
}
.rounded-circle {
height: 40px;
width: 40px;
border-radius: 50%;
display: inline-block;
}
<div class="dropdown">
<span onclick="myFunction()" class="dropbtn"><img class="rounded-circle avatar-align" src="https://source.unsplash.com/random/300x300"> </span>
<div id="myDropdown" class="dropdown-content">
Log in
Sign up
</div>
</div>

(HTML,CSS,JS) Trying to add Clickable Dropdown, icon button

I made "hamburger" icon on my website navigation bar.
I added simple animation JavaScript, it works great.
Now I want the icon to open Clickable Dropdown, I am kinda confused since I am already using script file, and class.
I am not sure how can i combine two JS code to the same Class, and how to edit the dropdown links with the original icon bars..
this is my Icon :
HTML:
<div class="hamburger" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
CSS:
.hamburger {
cursor: pointer;
color:#333;
list-style: none;
float: right;
padding: 18px;
position: relative;
display: inline-block;
}
Javascript:
function myFunction(x) {
x.classList.toggle("change");
}
Finally this is the dropdown I am trying to add:
HTML:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
CSS:
.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;}
Javascript:
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');
}
}
}
}

You can use the same function for both elements. I think the main issues is that you make the drop down disappear when clicked outside it. This "outside" includes the hamburger menu icon.
Here is a working example:
// Keep a refernce for dropdown to access it from any function
const dropdown = document.getElementById("myDropdown");
function myFunction() {
dropdown.classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
// Make sure ".hamburger" or any other class is included so when it is clicked it won't hide the dropdown
if (!event.target.matches('.dropbtn, .hamburger')) {
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');
}
}
}
}
.hamburger {
cursor: pointer;
color: #333;
list-style: none;
float: right;
padding: 18px;
position: relative;
display: inline-block;
width: 20px;
}
.hamburger>div {
height: 2px;
background-color: black;
width: 100%;
margin-bottom: 5px;
}
.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;
}
<div class="dropdown">
<div class="hamburger" onclick="myFunction()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>

I tried this solution, hope it works for you:
<style>
.hamburger {
cursor: pointer;
color: #333;
list-style: none;
float: right;
padding: 18px;
position: relative;
display: inline-block;
}
.bar1, .bar2,.bar3 {
width: 40px;
height: 2px;
background-color: black;
margin-bottom: 5px;
}
.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;
top: 50px;
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;
}
</style>
<div class="dropdown">
<div class="hamburger" onclick="myFunction()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<!-- <button onclick="myFunction()" class="dropbtn">Dropdown</button> -->
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<script>
function myFunction() {
const dropdown = document.getElementById('myDropdown')
dropdown.classList.toggle('show')
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.hamburger')) {
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>
As you can see I commented out the button, I'm not sure why you would use both, the button and the hamburguer button. Also added some styles to the 'bar; divs, otherwise you didn't see any 'hamburguer'.
Lastly change the thing you are matching on the window event listener to see if it contains the 'hamburger' class.

HTML Dropdown Menu text does not appear

Hello I have a question about the html dropdown menu.
I just followed the instruction from w3 school to create dropdown menu. (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown)
Everything is working, but when I click the menu button, I am not able to see the menu list as below. Is there anything I can do to fix this issue?
function dropDownMenu() {
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: 13px;
font-size: 13px;
border: none;
position: absolute;
right: -490px;
top: 8px;
background-color: #0076B1;
border-radius: 25%;
cursor: pointer;
transition: 0.3s;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
right: -490px;
top: 52px;
}
.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="dropDownMenu()" class="dropbtn">Change Date
Filter</button>
<div id="myDropdown" class="dropdown-content">
Date Picker
Date Slider
</div>
</div>

CSS
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border-radius: 25%;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: green; //change your color, use white or black
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;}
</style>
HTML
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Change Data Filter</button>
<div id="myDropdown" class="dropdown-content">
<font style="color:red">Date Center</font>
Date Slider
</div>
</div>
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 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');
}
}
}
}
</script>
And if you want to change one(of those two dropdown contents, just go with html style.
Change it with:
<font style="color:red">Home</font>

I use your code in code snippet and it look like it's working fine. see the snippet below.
function dropDownMenu() {
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: 13px;
font-size: 13px;
border: none;
position: absolute;
right: -490px;
top: 8px;
background-color: #0076B1;
border-radius: 25%;
cursor: pointer;
transition: 0.3s;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
right: -490px;
top: 52px;
}
.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="dropDownMenu()" class="dropbtn">Change Date Filter</button>
<div id="myDropdown" class="dropdown-content">
Date Picker
Date Slider
</div>
</div>