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>
Related
I have the code for my html button with CSS everything looks fine, just wanted to modify the button code because it should auto hide when user move away cursor from the button and same when it hover over the button should auto expand, basically it should auto expand and auto reduce and dropdown arrow would add value to it.
I already have code little confusion about adding the above points
The Dropdown arrow key to button,
Auto Expand & reduce on mouse cursor movement over the button),
/* 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++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #61CE70;
color: blue;
margin: 1px 1px;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
height: 10pxpx;
width: 100px;
text-decoration: none;
}
.dropbtn {
border-radius: 10px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url(https://search.png);
float: input;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
color: #fff;
background-color: #086815;
padding: 10px 10px 10px 45px;
border: 1px;
border-radius: 15px;
width: 400px;
text-align-last: max-width;
border-color: #086815;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
text-overflow: ellipsis;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #067B0A4A;
min-width: 400px;
max-height: 550px;
overflow: scroll;
text-align-last: left;
border: 1px solid blue;
border-radius: 15px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
width: 390px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #7A7A7A;
}
.show {
display: block;
}
/* ADD CSS */
div#myDropdown a span {
display: inline-block;
float: right;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">SURAH</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search your Surah.." id="myInput" onkeyup="filterFunction()">
1.Sureh Al-Fatihah <span>سُوْرَۃُ الفَاتِحَة</span>
2.Sureh Al-Baqarah <span>سُوْرَۃُ الفَاتِحَة</span>
</div>
</div>
Use onmouseover and onmouseout.
I guess you would like to keep myDropdown open, when you hover it, so I added the onmouseover/onmouseout effect also there.
And JS code is simple:
function show() {
document.getElementById("myDropdown").classList.add("show");
}
function hide() {
document.getElementById("myDropdown").classList.remove("show");
}
function show() {
document.getElementById("myDropdown").classList.add("show");
}
function hide() {
document.getElementById("myDropdown").classList.remove("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++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #61CE70;
color: blue;
margin: 1px 1px;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
height: 10pxpx;
width: 100px;
text-decoration: none;
}
.dropbtn {
border-radius: 10px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url(https://search.png);
float: input;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
color: #fff;
background-color: #086815;
padding: 10px 10px 10px 45px;
border: 1px;
border-radius: 15px;
width: 400px;
text-align-last: max-width;
border-color: #086815;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
text-overflow: ellipsis;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #067B0A4A;
min-width: 400px;
max-height: 550px;
overflow: scroll;
text-align-last: left;
border: 1px solid blue;
border-radius: 15px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
width: 390px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #7A7A7A;
}
.show {
display: block;
}
/* ADD CSS */
div#myDropdown a span {
display: inline-block;
float: right;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
<div class="dropdown">
<button onmouseover="show()" onmouseout="hide()" class="dropbtn">SURAH</button>
<div onmouseover="show()" onmouseout="hide()" id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search your Surah.." id="myInput" onkeyup="filterFunction()">
1.Sureh Al-Fatihah <span>سُوْرَۃُ الفَاتِحَة</span>
2.Sureh Al-Baqarah <span>سُوْرَۃُ الفَاتِحَة</span>
</div>
</div>
For the hovering part, you can achiveve it with CSS only:
.dropdown-content {
display: none;
}
.dropbtn:hover + .dropdown-content {
display: block;
}
Working example:
.dropbtn {
background-color: #61CE70;
color: blue;
margin: 1px 1px;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
height: 10pxpx;
width: 100px;
text-decoration: none;
}
.dropdown-content {
display: none;
}
.dropbtn:hover + .dropdown-content {
display: block;
}
.dropbtn {
border-radius: 10px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url(https://search.png);
float: input;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
color: #fff;
background-color: #086815;
padding: 10px 10px 10px 45px;
border: 1px;
border-radius: 15px;
width: 400px;
text-align-last: max-width;
border-color: #086815;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
text-overflow: ellipsis;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #067B0A4A;
min-width: 400px;
max-height: 550px;
overflow: scroll;
text-align-last: left;
border: 1px solid blue;
border-radius: 15px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
width: 390px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #7A7A7A;
}
.show {
display: block;
}
/* ADD CSS */
div#myDropdown a span {
display: inline-block;
float: right;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">SURAH</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search your Surah.." id="myInput" onkeyup="filterFunction()">
1.Sureh Al-Fatihah <span>سُوْرَۃُ الفَاتِحَة</span>
2.Sureh Al-Baqarah <span>سُوْرَۃُ الفَاتِحَة</span>
</div>
</div>
Can anyone make this so that it goes displays up as a drop-up. Also if you can, can you make it so that when you click outside of the content the box closes?
/* 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;}
<body>
<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>
</body>
As dropdown is a parent container and its child dropdown-content is absolute positioned. You can add to dropdown-content so that it can open upwards.
bottom: 50px;
/* 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;
bottom: 50px;
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;}
<body>
<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>
</body>
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>
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.
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>