https://ataqfuel.com/pages/home-page-v2
I am trying to get button 2 and 3 to close like button 1 does when clicking outside of the dropdown menu. I tried adding myFunction1 code to myFunction2 and myFunction3 code but I'm not sure if I messed up the naming or what because all the dropdowns stopped functioning then.
function myFunction1() {
document.getElementById("myDropdown1").classList.toggle("show");
document.getElementById("myDropdown1").addEventListener('click', function(event) {
event.stopPropagation();
});
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown-content1");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
document.getElementById("dropbtn1").addEventListener('click', function(event) {
event.stopPropagation();
});
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn2')) {
var dropdowns = document.getElementsByClassName("dropdown-content2");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function myFunction3() {
document.getElementById("myDropdown3").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn3')) {
var dropdowns = document.getElementsByClassName("dropdown-content3");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
CSS : .dropbtn {
margin: 5%;
background-color: #d3d3d3;
color: gray;
padding: 16px;
font-size: 16px;
font-weight: 500;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #edeb3f;
}
.dropdown {
position: relative;
display: inline;
min-width: 160px;
}
.dropdown-content {
display: none;
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;
}
$('.moderate .button').on('click', (event) => {
$(event.target).siblings('.dropdown')
.toggleClass('is-open');
});
$(document).click(function(e) {
$('.moderate')
.not($('.moderate').has($(e.target)))
.children('.dropdown')
.removeClass('is-open');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" rel="stylesheet" />
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<style>
.dropdown {
box-shadow: 0 0 2px #777;
display: none;
left: 0;
position: absolute;
padding: 2px;
z-index: 10;
}
.dropdown a {
font-size: 12px;
padding: 4px;
}
.dropdown.is-open {
display: block;
}
</style>
<div class="control moderate">
<button class="button is-small" type="button">
moderate
</button>
<div class="box dropdown">
<ul>
<li><a class="nav-item">edit</a></li>
<li><a class="nav-item">delete</a></li>
<li><a class="nav-item">block user</a> </li>
</ul>
</div>
</div>
<div class="control moderate">
<button class="button is-small" type="button">
moderate
</button>
<div class="box dropdown">
<ul>
<li><a class="nav-item">edit</a></li>
<li><a class="nav-item">delete</a></li>
<li><a class="nav-item">block user</a></li>
</ul>
</div>
</div>
You can use full screen width and height fixed backdrop for that. And after backdrop click close menu. It should be something like this:
jQuery(".backdrop").click(function(){
jQuery("#menu").toggleClass("open");
});
Related
With below code I'm trying to change the placeholder for select element on link click. But no changes are seen as of now. Also I'm trying to figure out how to show div when click on gear icon. Currently it works when click on div but not for icon present in it.
<!doctype html>
<html lang="en">
<head>
<!-- Dropdown - > https://stackoverflow.com/questions/43579748/how-to-achieve-autocomplete-feature-over-html-drop-down-or-select-element -->
<!-- focus in-out event > https://stackoverflow.com/questions/57284729/onclick-change-width-of-dropdown-using-javascript/57284975#57284975 -->
<title>jQuery UI Autocomplete - Default functionality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 8px;
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 8px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 8px 8px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
<script>
$(function() {
$('select')
.select2({
placeholder: 'Search Command...',
width: '200',
multiple: false,
data: [{
id: '',
text: ''
}, {
id: 'rrrrrrr',
text: 'testing1'
}, {
id: 'testing 1,2,3',
text: 'testing 1,2,3gffffff'
}],
tokenSeparators: ['|']
})
$('.select2-container').click(function() {
$(this).css('width','500px');
});
$('.select2-container').focusout(function() {
$(this).css('width','200px');
});
$('#changeCommand').click(function() {
$('select').css('placeholder','Search Command...');
});
$('#changePref').click(function() {
$('select').css('placeholder','Search Preferences...');
});
$('#changeCD').click(function() {
$('select').css('placeholder','Search Customer Default...');
});
});
</script>
<script>
<!-- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown -->
/* 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>
</head>
<body>
<select></select> <div class="dropdown"><button class="dropbtn" onclick="myFunction()" style="border-radius: 3px;border: none;color: black; background-color: white;"><span>⚙</span></button></div>
<div id="myDropdown" class="dropdown-content">
<a id="changeCommand">Commands</a>
<a id="changePref">Preferences</a>
<a id="changeCD">Customer Default</a>
</div>
</body>
</html>
You can try the following way:
$(function() {
$('select')
.select2({
placeholder: 'Search Command...',
allowClear: true,
width: '200',
multiple: false,
data: [{
id: '',
text: ''
}, {
id: 'rrrrrrr',
text: 'testing1'
}, {
id: 'testing 1,2,3',
text: 'testing 1,2,3gffffff'
}],
tokenSeparators: ['|']
})
.on('select2:open', function() {
$('.select2-container').css('width','600px');
})
.on("select2:close", function () {
$('.select2-container').css('width','200px');
});
$('#changeCommand').click(function() {
$('.select2-selection__placeholder').text('Search Command...');
});
$('#changePref').click(function() {
$('.select2-selection__placeholder').text('Search Preferences...');
});
$('#changeCD').click(function() {
$('.select2-selection__placeholder').text('Search Customer Default...');
});
});
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
var dropdowns = document.getElementById("myDropdown");
if (event.target.classList.contains('dropbtn')) {
dropdowns.classList.toggle("show");
}
else if (!event.target.classList.contains("dropbtn") && dropdowns.classList.contains("show")){
dropdowns.classList.toggle("show");
}
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 8px;
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 8px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 8px 8px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<select></select>
<div class="dropdown"><button class="dropbtn" style="border-radius: 3px;border: none;color: black; background-color: white;">⚙</button></div>
<div id="myDropdown" class="dropdown-content">
<a id="changeCommand">Commands</a>
<a id="changePref">Preferences</a>
<a id="changeCD">Customer Default</a>
</div>
Just remove remove the subscription on the window.onclick event.
The onclick event on you button will be fired when child elements are clicked. Your current logic will show and directly hide the dropdown
I am trying to do a side navigation that:
Just have ONE open sublist (close other)
Select only the clicked link in sublist
There are tons of examples out there, but I have not found any good sample in Vanilla Javascript.
HTML
<div class="sidenav">
Home
<button class="btn">Module 1</button>
<div class="list">
Link 1
Link 2
Link 3
</div>
<button class="btn">Module 2</button>
<div class="list">
Link 1
Link 2
Link 3
</div>
</div>
Javascript
var dropdown = document.getElementsByClassName("btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
The complete CSS is found on this Fiddle:
http://jsfiddle.net/q2en6djg/1/
Any clue, hint or help is appreciated.
You can consider an active CSS class to make it easier:
var dropdown = document.getElementsByClassName("btn");
var l = dropdown.length;
var i;
for (i = 0; i < l; i++) {
dropdown[i].addEventListener("click", function() {
for (var j = 0; j < l; j++) {
if (this != dropdown[j])
dropdown[j].classList.remove('active')
}
this.classList.toggle('active');
});
}
/*To select the sub item*/
var sub = document.querySelectorAll(".list a");
for (var i = 0; i < sub.length; i++) {
sub[i].addEventListener("click", function() {
this.classList.toggle('active');
});
}
* {
font-family: "Trebuchet MS", sans-serif;
font-size: 7em;
}
.sidenav {
margin-top: 0px;
height: auto;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #555;
overflow-x: hidden;
}
.sidenav a,
.btn {
padding: 10px 10px 10px 20px;
text-decoration: none;
font-size: 17px;
color: #fff;
display: block;
text-align: left;
border: none;
background: none;
width: 100%;
cursor: pointer;
outline: none;
border-bottom: 1px solid #777;
box-sizing:border-box;
}
.sidenav a:hover,
.sidenav a.active,
.btn:hover,
.btn.active {
background-color: #777;
}
.list {
display: none;
background-color: #999;
padding-left: 0px;
}
.active+.list {
display: block;
}
<div class="sidenav">
Home
<button class="btn">Module 1</button>
<div class="list">
Link 1
Link 2
Link 3
</div>
<button class="btn">Module 2</button>
<div class="list">
Link 1
Link 2
Link 3
</div>
</div>
I'm creating drop downs with a code that I found on the web.
Problem is, when I click on one menu that opens, then I click on the next menu, the first menu remains open...
I managed to get just about everything working great on drop downs, links, sizing and colors...
...but it won't close as I click over to the other drop down.
Any and all help would be appreciated!
function myFunction() {
document.getElementById("myDropdown1").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown1-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function FunctionFluids() {
document.getElementById("myDropdown2").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown2-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function FunctionAdditives() {
document.getElementById("myDropdown3").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown3-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function FunctionCleaners() {
document.getElementById("myDropdown4").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown4-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function FunctionWinter() {
document.getElementById("myDropdown5").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown5-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function FunctionLubricants() {
document.getElementById("myDropdown6").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown6-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function FunctionOther() {
document.getElementById("myDropdown7").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown7-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function FunctionNone() {
document.getElementById("myDropdown7").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown6-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.dropbtn1 {
background-color: transparent;
color: white;
padding: 7px 10px 7px 10px;
font-size: 13px;
font-weight: bold;
font-family: "Arial Narrow", Arial, sans-serif;
border: none;
cursor: pointer;
}
.dropbtn1:hover,
.dropbtn1:focus {
background-color: #383838;
}
.dropdown1 {
position: relative;
display: inline-block;
}
.dropdown1-content {
display: none;
position: absolute;
background-color: #eff0f2;
font-size: 13px;
font-weight: bold;
line-height: 2.2;
width: 200px;
padding: 23px 10px 10px 10px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: -501;
border-bottom: 3px solid red;
}
.dropdown1-content a {
color: black;
text-align: left;
font-size: 12px;
padding: 6px 6px 6px 6px;
text-decoration: none;
}
.dropdown1-content a:hover {
background-color: #ddd
}
.show {
display: block;
}
<div style="background-color:black">
<div class="dropdown1">
<button onclick="myFunction()" class="dropbtn1">REFRIGERANTS</button>
<div id="myDropdown1" class="dropdown1-content" style="text-align:left;">
Refrigerants<br>
Lubricants<br>
Treatments<br>
R-134A Products<br>
</div>
</div>
<div class="dropdown1">
<button onclick="FunctionFluids()" class="dropbtn1">FLUIDS</button>
<div id="myDropdown2" class="dropdown1-content" style="text-align:left">
Brake Fluid<br>
Automatic Transmission Fluid<br>
Power Steering Fluid<br>
</div>
</div>
<div class="dropdown1">
<button onclick="FunctionAdditives()" class="dropbtn1">ADDITIVES</button>
<div id="myDropdown3" class="dropdown1-content" style="text-align:left">
Fuel Additives<br>
Oil Additives
</div>
</div>
<div class="dropdown1">
<button onclick="FunctionCleaners()" class="dropbtn1">CLEANERS</button>
<div id="myDropdown4" class="dropdown1-content" style="text-align:left">
Brake Parts Cleaner<br>
Carb & Air Intake Cleaners<br>
General Cleaners<br>
Battery Cleaners<br>
</div>
</div>
</font>
</td>
<td></td>
<td align="left" width="38%">
<font color="#ffffff">
<div class="dropdown1">
<button onclick="FunctionWinter()" class="dropbtn1">WINTER DRIVING</button>
<div id="myDropdown5" class="dropdown1-content" text-align="left">
Link 1<br>
Link 2<br>
Link 3<br>
</div>
</div>
<div class="dropdown1">
<button onclick="FunctionLubricants()" class="dropbtn1">LUBIRICANTS</button>
<div id="myDropdown6" class="dropdown1-content" text-align="left">
Link 1<br>
Link 2<br>
Link 3<br>
</div>
</div>
<div class="dropdown1">
<button onclick="FunctionOther()" class="dropbtn1">OTHER PRODUCTS</button>
<div id="myDropdown7" class="dropdown1-content" text-align="left">
Link 1<br>
Link 2<br>
Link 3<br>
</div>
</div>
</div>
Here's a technique that doesn't need ids, and doesn't need 4 functions that all do the same thing. It uses classes to assign handlers and find elements based on what button was clicked.
// set up the event handlers
var buttons = document.querySelectorAll("button.dropbtn");
for (var i=0; i < buttons.length; i++) {
buttons[i].addEventListener("click", showDiv);
}
// set up the mouseout handlers
var contentDivs = document.querySelectorAll(".dropdown-content");
for (var i=0; i < contentDivs.length; i++) {
contentDivs[i].addEventListener("mouseleave", hideDiv);
}
function showDiv(e) {
// remove "show" class from previously shown menu, if it exists.
var prev = document.querySelector(".dropdown-content.show");
if (prev) prev.classList.remove("show");
// add "show" class to new clicked menu, unless the clicked menu was already open in which case close it
var dropdownContent = this.parentNode.querySelector(".dropdown-content");
if (dropdownContent == prev) return;
dropdownContent.classList.add("show");
}
function hideDiv() {
this.classList.remove("show");
}
.dropbtn{
background-color: transparent;
color: white;
padding: 7px 10px 7px 10px;
font-size: 13px;
font-weight:bold;
font-family: "Arial Narrow", Arial, sans-serif;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus{background-color: #383838;}
.dropdown{position: relative;display: inline-block;}
.dropdown-content{
display: none;
position: absolute;
background-color: #eff0f2;
font-size: 13px;
font-weight:bold;
line-height:2.2;
width: 200px;
padding: 23px 10px 10px 10px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: -501;
border-bottom: 3px solid red;
}
.dropdown-content a{
color: black;
text-align: left;
font-size: 12px;
padding: 6px 6px 6px 6px;
text-decoration: none;
}
.dropdown-content a:hover{background-color: #ddd}
.show {display:block;}
<div style="background-color:black">
<div class="dropdown">
<button class="dropbtn">REFRIGERANTS</button>
<div class="dropdown-content" style="text-align:left;">
Refrigerants<br>
Lubricants<br>
Treatments<br>
R-134A Products<br>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">FLUIDS</button>
<div class="dropdown-content" style="text-align:left">
Brake Fluid<br>
Automatic Transmission Fluid<br>
Power Steering Fluid<br>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">ADDITIVES</button>
<div class="dropdown-content" style="text-align:left">
Fuel Additives<br>
Oil Additives
</div>
</div>
<div class="dropdown">
<button class="dropbtn">CLEANERS</button>
<div class="dropdown-content" style="text-align:left">
Brake Parts Cleaner<br>
Carb & Air Intake Cleaners<br>
General Cleaners<br>
Battery Cleaners<br>
</div>
</div>
</font></td>
<td></td>
<td align="left" width="38%"><font color="#ffffff">
<div class="dropdown">
<button class="dropbtn">WINTER DRIVING</button>
<div class="dropdown-content" text-align="left">
Link 1<br>
Link 2<br>
Link 3<br>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">LUBIRICANTS</button>
<div class="dropdown-content" text-align="left">
Link 1<br>
Link 2<br>
Link 3<br>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">OTHER PRODUCTS</button>
<div class="dropdown-content" text-align="left">
Link 1<br>
Link 2<br>
Link 3<br>
</div>
</div>
</div>
You don't need to write separate function for every dropdown...
...use event.target to find the clicked element and toggle show class to it...
...to remove the previously added show class use for loop to find that element and remove that class
Note: I am adding the show class to the .dropbtn1 and then using css adjacent selector(+) to display:block to the next .dropdown1-content
Stack Snippet
window.onclick = function(event) {
if (event.target.matches('.dropbtn1')) {
var dropbuttons = document.getElementsByClassName("dropbtn1");
for (var i = 0; i < dropbuttons.length; i++) {
var openDropdown = dropbuttons[i];
if (openDropdown.classList.contains('show') && !event.target.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
event.target.classList.toggle("show");
}
}
.dropbtn1 {
background-color: transparent;
color: white;
padding: 7px 10px 7px 10px;
font-size: 13px;
font-weight: bold;
font-family: "Arial Narrow", Arial, sans-serif;
border: none;
cursor: pointer;
}
.dropbtn1:hover,
.dropbtn1:focus {
background-color: #383838;
}
.dropdown1 {
position: relative;
display: inline-block;
}
.dropdown1-content {
display: none;
position: absolute;
background-color: #eff0f2;
font-size: 13px;
font-weight: bold;
line-height: 2.2;
width: 200px;
padding: 23px 10px 10px 10px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: -501;
border-bottom: 3px solid red;
}
.dropdown1-content a {
color: black;
text-align: left;
font-size: 12px;
padding: 6px 6px 6px 6px;
text-decoration: none;
}
.dropdown1-content a:hover {
background-color: #ddd
}
.show+.dropdown1-content {
display: block;
}
<div style="background-color:black">
<div class="dropdown1">
<button class="dropbtn1">REFRIGERANTS</button>
<div id="myDropdown1" class="dropdown1-content" style="text-align:left;">
Refrigerants<br>
Lubricants<br>
Treatments<br>
R-134A Products<br>
</div>
</div>
<div class="dropdown1">
<button class="dropbtn1">FLUIDS</button>
<div id="myDropdown2" class="dropdown1-content" style="text-align:left">
Brake Fluid<br>
Automatic Transmission Fluid<br>
Power Steering Fluid<br>
</div>
</div>
<div class="dropdown1">
<button class="dropbtn1">ADDITIVES</button>
<div id="myDropdown3" class="dropdown1-content" style="text-align:left">
Fuel Additives<br>
Oil Additives
</div>
</div>
<div class="dropdown1">
<button class="dropbtn1">CLEANERS</button>
<div id="myDropdown4" class="dropdown1-content" style="text-align:left">
Brake Parts Cleaner<br>
Carb & Air Intake Cleaners<br>
General Cleaners<br>
Battery Cleaners<br>
</div>
</div>
<div class="dropdown1">
<button class="dropbtn1">WINTER DRIVING</button>
<div id="myDropdown5" class="dropdown1-content" text-align="left">
Link 1<br>
Link 2<br>
Link 3<br>
</div>
</div>
<div class="dropdown1">
<button class="dropbtn1">LUBIRICANTS</button>
<div id="myDropdown6" class="dropdown1-content" text-align="left">
Link 1<br>
Link 2<br>
Link 3<br>
</div>
</div>
<div class="dropdown1">
<button class="dropbtn1">OTHER PRODUCTS</button>
<div id="myDropdown7" class="dropdown1-content" text-align="left">
Link 1<br>
Link 2<br>
Link 3<br>
</div>
</div>
</div>
I'm attempting to create a drop-down menu in javascript, html and css however when I run the code nothing is showing on canvas. Is it because the files aren't communicating with each other correctly?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>DropdownMenu</title>
<link rel='stylesheet' type='text/css' href='Stylesheetdropdown.css'/>
</head>
<body>
<canvas id="canvas" width="5000" height="5000">
</canvas>
<script type='text/javascript' src='DropdownMenu.js'></script>
</body>
<body>
<div class = "dropdown">
<button onclick = "dropdown()" class = "drpdwnbtn">Menu</button>
<div id = "myMenu" class = "drpdwncntnt">
<p>100</p>
<p>200</p>
<p>300</p>
</div>
</div>
</body>
</html>
Javascript:
function dropdown() {
document.getElementById("myMenu").classList.toggle("show");
}
window.onclick = function (event) {
if (!event.target.matches('.drpdwnbtn')) {
var dropdowns = document.getElementsByClassName("drpdwncntnt"),
i,
openDropdown = dropdowns[i];
for (i = 0; i < dropdowns.length; i += 1) {
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
CSS:
.drpdwnbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.drpdwnbtn:hover, .drpdwnbtn:focus {
background-color: #E0FFFF;
}
.dropdown {
position: relative;
display: inline-block;
}
.drpdwncntnt {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.drpdwncntnt a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
Your canvas was over your menu div, your html should look like:
<div class = "dropdown">
<button onclick = "dropdown()" class = "drpdwnbtn">Menu</button>
<div id = "myMenu" class = "drpdwncntnt">
<p>100</p>
<p>200</p>
<p>300</p>
</div>
</div>
<canvas id="canvas" width="5000" height="5000">
</canvas>
, so here is a working fiddle:
https://jsfiddle.net/ahpook4p/
i am trying to create a menu with JS, when i click on the first menu item and it is open, then i want when i click on the next item i want the first one to close and the second one to open and when i am clicking on the open menu item i want it to close. also when i click anywhere if i can make it close as well...
here the code i have
HTML
<div class="container-header">
<div class="navbar">
<ul>
<li>
<a onclick="dropdownToggle(event)"><span>Products</span></a>
<div class="dropdown">
<ul class="submenu-img">
<li><a><img src="2015_images/img.png">title</a></li>
<li><a><img src="2015_images/img.png">title</a></li>
<li><a><img src="2015_images/img.png">title</a></li>
<li><a><img src="2015_images/img.png">title</a></li>
<li><a><img src="2015_images/img.png">title</a></li>
</ul>
</div>
</li>
<li><a onclick="dropdownToggle(event)"><span>Services</span></a>
<div class="dropdown">
<ul class="submenu">
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
</ul>
</div>
</li>
<li><a onclick="dropdownToggle(event)"> <span>Softwares</span></a>
<div class="dropdown">
<ul class="submenu">
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
</ul>
</div>
</li>
</ul>
</div>
CSS
* {
box-sizing: border-box;
}
ul {
list-style: none;
}
.navbar {
width: 100%;
text-align: center;
position: absolute;
top: -500px;
background-color: #585859;
transition: top 0.3s;
z-index: 1;
}
#media screen and (min-width: 768px) {
.navbar {
line-height: 65px;
width: auto;
position: static;
}
}
.navbar ul {
margin: 0;
padding: 0;
}
.navbar li {
vertical-align: middle;
color: #fff;
padding: 10px;
border-bottom: 5px solid #fff;
}
#media screen and (min-width: 768px) {
.navbar li {
display: inline-block;
margin-right: 10px;
border: none;
padding: 0;
}
}
.dropdown {
display: none;
}
.dropdown-open {
display: block;
position: absolute;
top: 70px;
left: 0;
background: rgba(88, 88, 89, 0.7);
width: 100%;
}
.submenu {
width: 100%;
display: flex;
align-items: center;
flex-flow: row;
justify-content: center;
padding: 10px 0 !important;
}
.submenu li {
margin: 0 2px;
flex: 0 0 12%;
line-height: normal;
}
and JS
function dropdownToggle(event) {
var dropdownItem = event.target.parentElement.parentElement.getElementsByClassName("dropdown")[0];
if (dropdownItem.classList.contains("dropdown-open")) {
var dropdowns = document.querySelectorAll(".dropdown");
var arrayLength = dropdowns.length;
for (var i = 0; i < arrayLength; i++) {
dropdowns[i].classList.remove("dropdown-open");
}
}
else {
dropdownItem.classList.toggle("dropdown-open");
}
}
I tried on JSFiddle but it is not working so here is a codepen as well..
http://codepen.io/nnns/pen/rLvdgE
The best way will be to put
var dropdowns = document.querySelectorAll(".dropdown");
var arrayLength = dropdowns.length;
for (var i = 0; i < arrayLength; i++) {
dropdowns[i].classList.remove("dropdown-open");
}
in a function and call it at the beginning of your function dropdownToggle(event) so like that every time you call your function you close everything and can open what you want.
EDIT
Do this:
function dropdownToggle(event) {
var dropdownItem =event.target.parentElement.parentElement.getElementsByClassName("dropdown")[0];
var dropdowns = document.querySelectorAll(".dropdown");
var arrayLength = dropdowns.length;
for (var i = 0; i < arrayLength; i++) {
dropdowns[i].classList.remove("dropdown-open");
}
dropdownItem.classList.add("dropdown-open");
}
function dropdownToggle(event) {
var dropdownItem = event.target.parentElement.getElementsByClassName("dropdown")[0];
dropdownItem.classList.remove("dropdown");
var dropdowns = document.querySelectorAll(".dropdown");
var arrayLength = dropdowns.length;
for (var i = 0; i < arrayLength; i++) {
dropdowns[i].classList.remove("dropdown-open");
}
dropdownItem.classList.toggle("dropdown-open");
dropdownItem.classList.add("dropdown");
}
This removes all dropdown open classes and toggles the dropdown that is found in the parent(li) of the a.
To close on body click:
document.all.body.onclick=dropdownToggle(document.all.body);