Develop Reference

Dropdown not appearing on click

I am trying to add a dropdown menu so when the page is viewed on mobile the user can click and access all the pages available. I am not getting any type of error code, just no response. Below are the snippets of HTML, CSS and JavaScript that should be affecting the code. Thanks for taking the time to read through this.
/*When user clicks name on shows dropdown menu allowing for nav on smaller viewports */
function dropDown() {
document.getElementById("dropNav").classList.toggle("show");
}
//close drop down if clicked outside
window.onclick = function(event) {
if (!event.target.matches('dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.dropbtn {
background-color: white;
color: #000;
padding: 8px 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover .dropbtn:focus {
background-color: #f1f1f1;
}
/* menu below button*/
.dropdown {
position: relative;
display: inline-block;
}
/* hidden dropdown, using z to plac in front of other elements */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: goldenrod
}
.show {
display: block;
}
<div class="dropdown">
<button onclick="dropDown()" class="dropbtn"><b>AH</b>NAME</button>
<div id="dropNav" class="dropdown-content">
Portfolio
About
Contact
Travels
Web Security Information
</div>
</div>

/*When user clicks name on shows dropdown menu allowing for nav on smaller viewports */
function dropDown(event) {
event.stopPropagation();
document.getElementById("dropNav").classList.toggle("show");
}
//close drop down if clicked outside
window.onclick = function(event) {
if (!event.target.matches('dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.dropbtn {
background-color: white;
color: #000;
padding: 8px 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover .dropbtn:focus {
background-color: #f1f1f1;
}
/* menu below button*/
.dropdown {
position: relative;
display: inline-block;
}
/* hidden dropdown, using z to plac in front of other elements */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: goldenrod
}
.show {
display: block;
}
<div class="dropdown">
<button onclick="dropDown(event)" class="dropbtn"><b>AH</b>NAME</button>
<div id="dropNav" class="dropdown-content">
Portfolio
About
Contact
Travels
Web Security Information
</div>
</div>

How to make font awesome icon clickable event

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.

How to make different menu item dropdowns

why a dropdown menu using the same menu will appear the same, how to make a dropdown menu using the same JS but look different like using bootstrap the dropdown will display the dropdown that we clicked on that will appear.
The code here doesn't display a different dropdown based on what I clicked on.
here like me
click drop 1 to display 1
and I
click drop 2 appears 1
how to make different click dropdowns, do I have to make the same 2 js with different names?
maybe someone here can help my problem
/* 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;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown 1</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown 2</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>

I hope this is what u r expecting.
use onlick function with parameter onclick="myFunction(num)".
function myFunction(num)
{
document.getElementById("myDropdown"+num).classList.toggle("show");
}
function myFunction(num)
{
document.getElementById("myDropdown"+num).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');
}
}
}
}
.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">
<button onclick="myFunction(1)" class="dropbtn">Dropdown 1</button>
<div id="myDropdown1" class="dropdown-content">
Home1
About1
Contact1
</div>
</div>
<div class="dropdown">
<button onclick="myFunction(2)" class="dropbtn">Dropdown 2</button>
<div id="myDropdown2" class="dropdown-content">
Home2
About2
Contact2
</div>
<div class="dropdown">
<button onclick="myFunction(3)" class="dropbtn">Dropdown 3</button>
<div id="myDropdown3" class="dropdown-content">
Home3
About3
Contact3
</div>
<div class="dropdown">
<button onclick="myFunction(4)" class="dropbtn">Dropdown 4</button>
<div id="myDropdown4" class="dropdown-content">
Home4
About4
Contact4
</div>
</div>

How to set the value from the drop down as the default value in the box?

I want the set default value of the select to month. Moreover on load select should show month as text instead of Filter.
How can it be achieved???
any help would do good.
Below is the snippet of the code I have written so far.
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');
}
}
}
}
.dropbtn {
background-color: #3498DB;
position: relative;
margin: 0 20px;
color: white;
padding: 3px 10px;
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: 130px;
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: #ddd}
.dropdown:hover .dropdown-content {display: block;}
.show {display:block;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Filter </button>
<div id="myDropdown" class="dropdown-content">
Day
Week
Month
</div>
Please let me know how i can achieve this

Try this. You can apply click event on the links and when clicked the value of filter can be set
$(document).ready(function(){
$(".dropbtn").html($(".default").text())
})
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');
}
}
}
}
$("#myDropdown").children('a').click(function(){
$('.dropbtn').html($(this).text())
})
.dropbtn {
background-color: #3498DB;
position: relative;
margin: 0 20px;
color: white;
padding: 3px 10px;
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: 130px;
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: #ddd}
.dropdown:hover .dropdown-content {display: block;}
.show {display:block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Filter </button>
<div id="myDropdown" class="dropdown-content">
Day
Week
Month
</div>

HTML5 makes this more easier by using the select tag.
The selected option will specify which option has to be selected by default when the page loads.
<select>
<option value="Day">Day</option>
<option value="Week">Week</option>
<option value="Month" selected >Month</option>
<select>

Instead of that div class you've got. Create a dropdown such as the following.
<select>
<option value="Day">Day</option>
<!--etc-->
</select>
To make a default using this you can simply add the following
<option value="Day" selected="selected">Day</option>

How to load a page inside drop down menu's container using javascript?

Here is a javascript drop down menu from w3schools with slight modification on my part, instead of links I am showing a container. Now I want to show a page inside this container let it be test.php. How to load test.php inside container when droptbtn is clicked.
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');
}
}
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.container{
min-width:300px;
min-height:400px;
border:2px solid #666;
}
.show {display:block;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<div class="container"</div>
</div>
</div>

I'd suggest taking a look at Jquerys load() function
$( "#myDropdown" ).load( "test.php" );
So in your click event just use the above to load the right page (test.php) into the selector (#myDropdown).