Develop Reference

Why does adding a second dropdown mess up the JS to close menu when user clicks outside it?

I'm not super familiar with JS. I used the W3Schools tutorial for creating an on-click dropdown menu as a reference and added a second menu. However, only the second dropdown menu listed in the javascript maintains the functionality of closing when the user clicks outside the dropdown. (I can switch the order of the functions listed in the JS, and changing nothing else, that switches which menu has that close-when-click-outside functionality.)
Can anyone help me understand why that is? How to fix it would be a bonus but mostly I just don't get why it works for one menu and not the other.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function drop1() {
document.getElementById("drop1").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn1')) {
var drop1 = document.getElementById("drop1");
if (drop1.classList.contains('show')) {
drop1.classList.remove('show');
}
}
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function drop2() {
document.getElementById("drop2").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn2')) {
var drop2 = document.getElementById("drop2");
if (drop2.classList.contains('show')) {
drop2.classList.remove('show');
}
}
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropbtn1,
.dropbtn2 {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn1" onclick="drop1()">Dropdown
+
</button>
<div class="dropdown-content" id="drop1">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn2" onclick="drop2()">Dropdown 2
+
</button>
<div class="dropdown-content" id="drop2">
Link 4
Link 5
Link 6
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</p>
Thank you!

You are only allowed to have one onclick.
The second will overwrite the first
Instead use eventListener and delegation
Notice I removed the inline click and I now only have one class instead of a class per button
window.addEventListener("load", function() {
// click the dropdown if the user clicks outside it unless that is a button
document.addEventListener("click", function(e) {
const tgt1 = e.target.closest('.dropdown-content');
const tgt2 = e.target.closest('.dropbtn');
if (!tgt1 && !tgt2) {
document.querySelectorAll('.dropdown-content').forEach(div => div.classList.remove('show'));
}
})
document.querySelector(".navbar").addEventListener("click", function(e) {
const tgt = e.target.closest("button");
if (tgt && tgt.matches('.dropbtn')) {
document.querySelectorAll('.dropdown-content').forEach(div => div.classList.remove('show'));
document.getElementById(tgt.dataset.id).classList.add('show');
}
})
})
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn" data-id="drop1">Dropdown
+
</button>
<div class="dropdown-content" id="drop1">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn" data-id="drop2">Dropdown 2
+
</button>
<div class="dropdown-content" id="drop2">
Link 4
Link 5
Link 6
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</p>

📌 Can anyone help me understand why that is? How to fix it would be a bonus but mostly I just don't get why it works for one menu and not the other.
✨ I'm going to make the smallest possible change to your code to make it work, so that you can best learn what happened. I'm not going to redesign your approach.
window.onclick is a variable, and you are assigning a value to it twice. The second function you assign it, for Dropdown 2, overwrites the first, which was for Dropdown 1.
The problem is easily solved by combining the logic into one function assigned to window.onclick as below.
Another simple, and probably better fix, is to use window.addEventListener("click", function(event) { }) rather than window.onclick.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function drop1() {
document.getElementById("drop1").classList.toggle("show");
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function drop2() {
document.getElementById("drop2").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn1')) {
var drop1 = document.getElementById("drop1");
if (drop1.classList.contains('show')) {
drop1.classList.remove('show');
}
}
if (!e.target.matches('.dropbtn2')) {
var drop2 = document.getElementById("drop2");
if (drop2.classList.contains('show')) {
drop2.classList.remove('show');
}
}
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropbtn1, .dropbtn2 {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn1" onclick="drop1()">Dropdown
+
</button>
<div class="dropdown-content" id="drop1">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn2" onclick="drop2()">Dropdown 2
+
</button>
<div class="dropdown-content" id="drop2">
Link 4
Link 5
Link 6
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</p>

Side menu disappears when you hover over the text inside it

So my problem is that the side menu closes when you hover over the text inside it... The "About" text works properly but the other three don't... I tried different solutions but I can't figure out what's the cause for it. The menu is supposed to open when you hover over the 3 lines, and stay open while you're hovering over it. Please help
function openNav() {
document.getElementById("sidenav").style.width = "250px";
document.getElementById("menubtn").style.color = "transparent";
document.getElementById("menubtn").style.transition = "0.2s";
document.body.style.backgroundColor = "#a5a5a5";
}
function closeNav() {
document.getElementById("sidenav").style.width = "0";
document.getElementById("menubtn").style.color = "#ffffff";
document.getElementById("menubtn").style.transition = "0.6s";
document.body.style.backgroundColor = "#ffffff";
}
body {
margin: 0;
padding: 0;
transition: background-color 0.5s;
}
.navbarheader {
height: 80px;
width: 100%;
margin: 0px;
padding: 0px;
background-color: #1f1f1f;
}
.menubtn {
margin: 14px 0px 0px 23px;
padding: 0px;
font-size: 37px;
transform: scale(1, 0.8);
float: left;
color: #ffffff;
background-color: #1f1f1f;
border: none;
}
.sidenav {
height: 100%;
width: 0px;
position: fixed;
background-color: #1f1f1f;
transition-property: width;
transition-duration: 0.5s;
}
.sidenav a {
margin: 0px;
padding: 10px 0px 10px 25px;
text-decoration: none;
font-size: 25px;
color: #ffffff;
overflow: hidden;
display: block;
}
.sidenav a:hover {
color: #a5a5a5;
}
<body>
<div class="navbarheader">
<div><button id="menubtn" class="menubtn" onMouseover="openNav()">☰</button></div>
</div>
<div id="sidenav" class="sidenav" onMouseout="closeNav()">
<a style="padding-top: 20px" href="#">About</a>
Services
Clients
Contact
</div>
</body>

Your issue is that the onmouseout event is firing when you mouse out of one of the children. Use onmouseleave instead as it doesn't bubble. See this related post. It really isn't good practice to use inline handlers though. You should instead use the addEventListener() method. It would look like this:
document.getElementById("sidenav").addEventListener("mouseleave", function(event){
closeNav();
});

Perhaps a CSS approach, rather than a JS approach.
For example, consider removing all JS code. Then, set CSS as following:
.sidenav {
visibility: hidden;
}
.sidenav:hover {
visibility: visible;
display: block;
}

What is a clean way to toggle a slide in menu?

Okay so I am working on my new personal website and I have came to making the off canvas menu toggable. How cna I do so?
So far I have:
var mainNav = document.getElementById('menu');
var navToggle = document.getElementById('menu-toggle');
mainNav.classList.add('collapsed');
function mainNavToggle() {
mainNav.classList.toggle('collapsed');
}
navToggle.addEventListener('click', mainNavToggle);
.collapsed {
margin-left: -330px;
}
.navigation {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 300px;
height: 100%;
color: #212121;
background-color: #FFFFFF;
transition: all ease-in-out 200ms;
box-shadow: 3px 0px 30px rgba(0, 0, 0, 0.4);
}
.navigation ul {
display: flex;
flex-direction: column;
padding: 90px 0 0 30px;
}
.navigation li {
margin-bottom: 30px;
}
.navigation a {
display: inline-block;
font-size: 16px;
font-weight: 500;
}
.navigation i {
vertical-align: top;
margin-right: 10px;
}
.navigation .double-line {
display: inline-block;
line-height: 1.45;
}
.navigation .double-line span {
display: block;
font-size: 12px;
opacity: 0.3;
}
.clicked span {
background-color: #000;
}
.menu-toggle {
background-color: transparent;
border: 0px;
outline: 0px;
cursor: pointer;
position: relative;
z-index: 10;
}
.menu-toggle span {
display: block;
width: 18px;
height: 2px;
margin: 4px;
background-color: #FFFFFF;
}
<button class="menu-toggle" id="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<nav class="navigation" role="navigation" id="menu">
<ul>
/* Menu contents */
</ul>
</nav>
But with this code when the page loads you can see the menu being swept to the left, I dont want this.
How can I make my toggle button change colour when the menu is open?

Adding the class collapsed to the nav and removing the initial toggle solves your blinking issue! And toggling an active class on the toggle gets you a grey toggle when the $menu is open! The transition CSS property is optional to make the bg transition from transparent to grey look smooth.
Fiddle: https://jsfiddle.net/mbs1kymv/1/
JS:
var $menu = document.getElementById('menu');
var $toggle = document.getElementById('menu-toggle');
$toggle.addEventListener('click', function()
{
$menu.classList.toggle('collapsed');
$toggle.classList.toggle('active');
});
HTML:
<nav class="navigation collapsed" role="navigation" id="menu"> ... </nav>
CSS:
.menu-toggle {
transition: background-color 0.25s;
}
.menu-toggle.active {
background-color: #CCC;
}

show and hide menu with jquery

I would like,when clicking on the menu icon change to an X shape with animation and when clicking on X shape it change to menu icon.
I write this part.I have problem with clicking function. at first when I click on the menu button it change to X shape and show the menu but when I want to close menu my js codes does not work and I don't know why this happening.
I used bootstrap in my codes
I upload my site here
html
<div class="col-xs-6">
<a class="bazar" href="">دانلود اپلیکیشن </a>
<button type="button" style="z-index:401" class="navbar-toggle try-op" >
<span style="z-index:401" class="icon-bar top-m"></span>
<span style="z-index:401" class="icon-bar mid-m"></span>
<span style="z-index:401" class="icon-bar bottom-m"></span>
</button>
<div class="menu"> <!-- <span class="btnClose">×</span> -->
<ul>
<li>صفحه اصلی</li>
<li>سوالات متداول</li>
<li>فرصت های شغلی</li>
<li>درباره ما</li>
</ul>
</div>
</div>
js
$('.try-op').click(function() {
$('.navbar-toggle').removeClass('try-op');
$('.navbar-toggle').addClass('texting');
$('.top-m').addClass('top-animate');
$('.mid-m').addClass('mid-animate');
$('.bottom-m').addClass('bottom-animate');
$('.menu').addClass('opened');
var height = $( window ).height();
$('.menu').css('height',height);
});
$('.texting').click(function() {
$('.navbar-toggle').removeClass('texting');
$('.menu').removeClass('opened');
$('.top-m').removeClass('top-animate');
$('.mid-m').removeClass('mid-animate');
$('.bottom-m').removeClass('bottom-animate');
$('.navbar-toggle').addClass('try-op');
});
css
.icon-bar{
transition: 0.6s ease;
transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
}
.top-animate {
background: #fff !important;
top: 13px !important;
-webkit-transform: rotate(43deg);
transform: rotate(43deg);
transform-origin: 7% 100%;
-webkit-transform-origin: 7% 100%;
}
.mid-animate {
opacity: 0;
}
.bottom-animate {
background: #fff !important;
top: 13px !important;
-webkit-transform: rotate(-221deg);
transform: rotate(-221deg);
transform-origin: 45% 18%;
-webkit-transform-origin: 45% 18%;
margin-top: 0px !important;
}
.bazar-green, .bazar {
color: #fff;
display: block;
font-size: 20px;
position: absolute;
right: 80px;
top: 5px;
line-height: 43px;
background: url(image/bazarlogo.png) no-repeat left center;
padding-left: 80px;
z-index: 401;
}
.navbar-toggle {
display: block;
position: absolute;
right: 0px;
top: 0px;
}
.navbar-toggle{
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.menu {
width: 300px;
position: absolute;
z-index: 400;
background: rgba(0,0,0,0.7);
padding: 10px 30px;
text-align: right;
color: #fff;
font-size: 17px;
transition: all 1s;
right: -316px;
}
.btnClose {
color: #fff;
font-size: 30px;
cursor: pointer;
z-index: 500;
}

You are effectively adding 2 click handlers to the same element. When you click on the span elements the second handler is executed, and as the click event propagates then the first click handler is executed.
You should change the logic. Instead of using addClass/removeClass and having 2 handlers you can use just 1 click handler and toggle the classNames using toggleClass method.
$('.try-op').click(function() {
var isOpened = $('.menu').toggleClass('opened').hasClass('opened');
if ( isOpened ) {
// the menu is opened
} else {
// ...
}
});
Another option that you have is using the event delegation technique. I see that you are removing the className in your first handler, probably in order to unbind the handler for the next click handling, but event handlers are bound to elements not to their classNames.
$(document).on('click', '.navbar-toggle.open', function() {
$(this).removeClass('open').addClass('close');
// ...
});
$(document).on('click', '.navbar-toggle.close', function() {
$(this).removeClass('close').addClass('open');
// ...
});

Use $('.navbar-toggle').click(function() {
instead of $('.navbar-toggle span').click(function() {

Javascript animate div to position of other divs?

Alright, so I haven't been able to find an answer that suits what I am looking for. I am in need of a simple script that can animate a colored div to the position of a menu selection or navigation button. I want it to animate to the position of the div that the cursor is hovering over, but I don't want it to follow the cursor, I just want it to slide over to a portion of text on the menu to act as a highlight, or selector. Here is a JSFiddle. Oh, and one more thing. I would like the highlight to slide back to its original position(the selected menu item) after the menu has been hovered off of. EXAMPLE: (if 'about' selected, and 'home' hovered, slide to 'home', but slide back to 'about' if hovered off without selection). Any help is greatly appreciated!
http://jsfiddle.net/hbv63znv/
var main = function() {
$('.menu-item1').hover(function() {
$('.hover').animate({
left: ''
});
});
}
$(document).ready(main);
/*
Had to remove a few of the buttons to fit it in the JSFiddle page but I want to make the highlight slide to the position of each selection. I also want it to conform to the size(width) of the button. It would also be very nice if it automatically did all the animations by itself, by this I mean that the highlight would automattically conform to the size of the button instead of having a fixed width and position to slide to(This would allow me to change the text of the menu and I wouldnt have to change any of the javascript.
*/
/*Initial body */
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
/* Initial menu */
.menu {
position: fixed;
left: 30%;
right: 30%;
width: 40%;
text-align: center;
background-color: black;
padding-left: 10px;
padding-right: 10px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
}
/* Basic styling */
.content {
background-color: #E0E0E0;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu ul {
list-style: none;
margin: 0;
padding-left: 5px;
padding-right: 5px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
}
.hover {
height: 100%;
width: 100px;
background-color: #303030;
position: absolute;
margin-left: 30px;
}
.menu li {
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 30px;
padding-right: 30px;
padding-top: 3px;
display: inline
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-right: 5px;
}
h1 {
top: 80px;
position: absolute
}
<body>
<div class="menu">
<!-- Menu -->
<div class='hover'>
</div>
<ul>
<li class='menu-item'>Home</li>
<li class='menu-item'>Gallery</li>
<li class='menu-item'>About</li>
<li class='menu-item'>Contact</li>
</div>
<h1>Fullscreen to see the menu in the right form</h1>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>

Maybe something like this?
Javascript
var main = function() {
$('.menu-item').hover(function() {
var $el = $(this);
$('.hover').animate({
left: $el.offset().left - $('.menu').offset().left
});
});
$('.hover').css({
left: $('.menu-item:first').offset().left - $('.menu').offset().left
});
}
JSFIDDLE

Give all menu items the same class, then pass the offsetLeft of the event target (the menu item you are hovering over) into the animate call.
Updated Fiddle: http://jsfiddle.net/hbv63znv/7/
<li class='menu-item'>Home</li>
<li class='menu-item'>Gallery</li>
var main = function() {
$('.menu-item').hover(function() {
var that = this;
$('.hover').animate({
left: that.offsetLeft
});
});
}