We Keep Coding

The dropdown button is not working Not everyone is working Only one item accepts a javascript event

https://codepen.io/MohamedSamehAhmed/pen/NWMVaEb
On the page, I have three buttons to open the drop-down menu, and the problem is that only the first works and the rest does not
HTML Code:
<nav class="nav-bar">
<div class="logo">
Logo
</div>
<ul class="nav-links">
<li>Home</li>
<li>
<a class="drop-menu-btn" href="#">Product <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
<ul class="drop-menu">
<li class="drop-menu-link">link</li>
<li class="drop-menu-link">link</li>
<li class="drop-menu-link">link</li>
</ul>
</li>
<li>News</li>
<li>Tips</li>
<li>
<a class="drop-menu-btn" href="#">About Us <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
<ul class="drop-menu">
<li class="drop-menu-link">link</li>
<li class="drop-menu-link">link</li>
<li class="drop-menu-link">link</li>
</ul>
</li>
<li>
<a class="drop-menu-btn" href="#">Gallery <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
<ul class="drop-menu">
<li class="drop-menu-link">link</li>
<li class="drop-menu-link">link</li>
<li class="drop-menu-link">link</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
CSS Code:
:root {
--greenColor:#409a4d;
--whiteColor: #ffffff;
--blackColor:#212121;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Open Sans";
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
/* nav bar */
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.07));
background-color: #ffffff;
-webkit-filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.07));
padding: 14px 20px;
}
.nav-bar .logo a {
color: var(--greenColor);
font-weight: 500;
font-size: 25px;
}
.nav-bar .nav-links {
display: flex;
align-items: center;
gap: 50px;
}
.nav-bar .nav-links li a {
font-size: 18px;
font-weight: 400;
color: var(--blackColor);
transition:all 3s ease;
-webkit-transition:all 3s ease;
-moz-transition:all 3s ease;
-ms-transition:all 3s ease;
-o-transition:all 3s ease;
position: relative;
}
.nav-bar .nav-links li {
position: relative;
display: block;
}
.nav-bar .nav-links li .drop-menu {
display: none;
position: absolute;
top: 43px;
text-align: center;
filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.07));
background-color: #ffffff;
-webkit-filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.07));
animation: drop .3s;
-webkit-animation: drop .3s;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.nav-bar .nav-links li .drop-menu.active {
display: block;
width: 100%;
height: 180px;
}
.nav-bar .nav-links li .drop-menu-btn i.rotated {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
.nav-bar .nav-links li .drop-menu >li {
margin-bottom: 12px;
}
JS Code:
On the page, I have three buttons to open the drop-down menu, and the problem is that only the first works and the rest does not
const dropMenuBtn = document.querySelector('.drop-menu-btn');
const dropMenu = document.querySelector('.drop-menu');
const icon = document.querySelector('.drop-menu-btn i');
dropMenuBtn.addEventListener('click', () => {
dropMenu.classList.toggle('active')
icon.classList.toggle('rotated')
});
console.log(dropMenuBtn)

As Richard mentioned, if you're using JQuery this becomes easier as you could use something like:
const dropMenuBtn = document.querySelectorAll('.drop-menu-btn');
$(dropMenuBtn).click(function(){
$(this).closest("li").find(".drop-menu").toggleClass("active");
});
If you want to stick with pure JavaScript, something like this would work:
const dropMenuBtn = document.querySelectorAll('.drop-menu-btn');
const dropMenu = document.querySelector('.drop-menu');
const icon = document.querySelector('.drop-menu-btn i');
dropMenuBtn.forEach(item => {
item.addEventListener('click', event => {
var thisDD = event.target.closest("li").querySelector('.drop-menu');
if (thisDD.classList.contains("active")) {
thisDD.classList.remove("active");
}
else {
thisDD.classList.add("active");
}
});
});

Welcome!
Since you tagged jQuery, here is a possible solution:
$('.drop-menu-btn').each((i, btn) => {
$(btn).on('click', () => {
$(btn).next('.drop-menu').toggle();
});
});
try it out on codepen

Mobile Menu JQuery Menu Toggle Doesn't Close

I am coding a mobile menu to display when a menu toggle is clicked. This solution is currently working on smaller desktop windows (Chrome and Safari), but does not work on iOS (Safari). I tested the javascript event on mobile by using alert('You have clicked the menu toggle') in the $('.menu-toggle') function and it works, which leads me to believe this is a CSS issue.
See my code below:
HTML:
<div class="mobile-nav-container">
<div id="mobile-logo-home">
<img src="images/Chuck_Logo_V1.png" alt="Chuck Guth Site Logo" width="132px" height="35px">
</div>
<nav class="mobile-nav">
<ul>
<li class="mobile-menu-item">Home</li>
<li class="mobile-menu-item">About</li>
<li class="mobile-menu-item">Buyer Information</li>
<li class="mobile-menu-item">Search Homes</li>
<li class="mobile-menu-item">Featured Listings</li>
<li class="mobile-menu-item">Mortgage Calculator</li>
<li class="mobile-menu-item">Seller Information</li>
<li class="mobile-menu-item">Home Valuation</li>
<li class="mobile-menu-item">West Pasco</li>
<li class="mobile-menu-item">North Pinellas</li>
<li class="mobile-menu-item">Gulf Beaches</li>
<li class="mobile-menu-item">Contact</li>
</ul>
</nav>
</div>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
CSS:
/* Hide regular menu by default */
.site-nav, .reg-logo {
display: none;
}
header::after {
content: '';
clear: both;
display: block;
}
.mobile-logo {
position: relative;
float: left;
margin: 0;
top: -.25em;
left: 1em;
cursor: pointer;
}
.mobile-nav {
position: absolute;
width: 100%;
top: -.5em;
background: #f1f1f1;
clip-path: circle(0px at top right);
-webkit-clip-path: circle(0px at top right);
transition: clip-path ease-in-out 750ms;
-webkit-transition: clip-path ease-in-out 750ms;
}
.mobile-nav--open {
clip-path: circle(250% at top right);
-webkit-clip-path: circle(250% at top right);
display: block;
}
.mobile-nav ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
}
.mobile-nav ul li a {
border-bottom: 1px solid #333333;
}
/* .mobile-nav li:last-child {
border-bottom: none;
} */
.mobile-nav a {
color: #333333;
padding: 1em 1em 1em 1em;
text-decoration: none;
font-size: .875em;
}
.mobile-nav a:hover,
.mobile-nav a:focus {
background: #f1f1f1;
color: #a5c5c3;
}
.menu-toggle {
position: absolute;
padding: 1.25em;
top: 0em;
right: .5em;
cursor: pointer;
font-size: .75em;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: #333333;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
-webkit-transition: all ease-in-out 500ms;
}
.hamburger::before {
transform: translateY(-6px);
-webkit-transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
-webkit-transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
-webkit-transform: translateY(-3px) rotate(-90deg);
}
JavaScript:
<!-- Begin mobile nav JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.menu-toggle').click(function() {
$('.mobile-nav').toggleClass('mobile-nav--open', 500);
$(this).toggleClass('open');
});
$('.mobile-menu-item').click(function() {
$('.mobile-nav').removeClass('mobile-nav--open', 500);
})
</script>
<!-- End mobile nav JS -->
Thanks for any and all help!

Answering my own question - after clearing my browser's cache it appears to be working fine.

how to create an icon that rotate downward when just at the click

I made a slideToggle menu with the icon and, when the user clicks on the icon it will rotate down, but, when I click one of the icons all the icons rotate. How do I rotate only the clicked icon, not all of them?
$(document).ready(function() {
// toggle slide down nav
$('.nav-sidebar ul:has(li)').addClass('sub-menu');
$('.dropmenu').on('click', function() {
$(this).next('.sub-menu').slideToggle(200);
$(this).parent().siblings().children().next().slideUp();
return false;
});
// arrow rotate
$('.dropmenu').on('click', function() {
// $('.dropmenu').removeClass('openmenu');
// $(this).addClass('openmenu');
if ($('.dropmenu').hasClass('openmenu')) {
$('.dropmenu').removeClass('openmenu');
} else {
$('.dropmenu').addClass('openmenu');
}
});
});
.nav-sidebar {
list-style: none;
padding: 0;
margin: 0;
}
.nav-sidebar>li>a,
.sub-menu>li>a {
display: block;
color: #838F9A;
text-transform: capitalize;
padding: 0 30px;
line-height: 3.5em;
}
.sub-menu>li>a {
line-height: 2.5em;
}
.nav-sidebar>li>a:hover,
.nav-sidebar>li>a:focus,
.sub-menu>li>a:hover,
.sub-menu>li>a:focus {
color: #4FC1E9;
}
.dropmenu:after {
font-family: 'FontAwesome';
font-size: 16px;
content: "\f105";
vertical-align: middle;
float: right;
margin-right: -10px;
transition: all .3s ease;
}
.openmenu:after {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.sub-menu {
display: none;
list-style: none;
padding: 10px 30px;
margin: 0;
background-color: #1D232B;
position: relative;
}
.open-menu>.sub-menu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul class="nav-sidebar">
<li>
Place
<ul>
<li>Published
</li>
<li>Schedule
</li>
<li>My Place
</li>
</ul>
</li>
<li>
Place
<ul>
<li>Published
</li>
<li>Schedule
</li>
<li>My Place
</li>
</ul>
</li>
</ul>
External example that I made: https://jsfiddle.net/y6adghh3/

$(document).ready(function() {
// toggle slide down nav
$('.nav-sidebar ul:has(li)').addClass('sub-menu');
$('.dropmenu').on('click', function() {
$(this).toggleClass('openmenu');// arrow rotate
$(this).next('.sub-menu').slideToggle(200);
$(this).parent().siblings().children().removeClass('openmenu').next().slideUp();
return false;
});
});
.nav-sidebar {
list-style: none;
padding: 0;
margin: 0;
}
.nav-sidebar>li>a,
.sub-menu>li>a {
display: block;
color: #838F9A;
text-transform: capitalize;
padding: 0 30px;
line-height: 3.5em;
}
.sub-menu>li>a {
line-height: 2.5em;
}
.nav-sidebar>li>a:hover,
.nav-sidebar>li>a:focus,
.sub-menu>li>a:hover,
.sub-menu>li>a:focus {
color: #4FC1E9;
}
.dropmenu:after {
font-family: 'FontAwesome';
font-size: 16px;
content: "\f105";
vertical-align: middle;
float: right;
margin-right: -10px;
transition: all .3s ease;
}
.openmenu:after {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.sub-menu {
display: none;
list-style: none;
padding: 10px 30px;
margin: 0;
background-color: #1D232B;
position: relative;
}
.open-menu>.sub-menu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul class="nav-sidebar">
<li>
Place
<ul>
<li>Published
</li>
<li>Schedule
</li>
<li>My Place
</li>
</ul>
</li>
<li>
Place
<ul>
<li>Published
</li>
<li>Schedule
</li>
<li>My Place
</li>
</ul>
</li>
</ul>

Your selector $('.dropmenu') in the .on('click' function is selecting any element on the page with the class dropmenu. You need to make sure it only selects the element being clicked. Luckily you can reference the clicked element via this.
The following code should work:
$(document).ready(function() {
// toggle slide down nav
$('.nav-sidebar ul:has(li)').addClass('sub-menu');
$('.dropmenu').on('click', function() {
$(this).next('.sub-menu').slideToggle(200);
$(this).parent().siblings().children().next().slideUp();
return false;
});
// arrow rotate
$('.dropmenu').on('click', function() {
if ($(this).hasClass('openmenu')) {
$(this).removeClass('openmenu');
} else {
$(this).addClass('openmenu');
}
});
});

Just change the click handler to reference the clicked element using 'this'.
$('.dropmenu').on('click', function() {
if ($(this).hasClass('openmenu')) {
$(this).removeClass('openmenu');
} else {
$(this).addClass('openmenu');
}
});
});

Additional Navigation bar on click

I have a navigation bar with the section "Contracts" and I was wondering if it were possible, and how would I go about adding an additional navigation bar to expand underneath when this button is tagged, (For example, on the Apple Store site, when you click a product, this adds another bar)
I can provide my entire CSS style sheet if needed! I think this will require JavaScript but I'm trying to keep it as pure CSS for now!
All help is greatly appreciated!
HTML Code: This is the Navigation HTML
<header>
<div class="title">
<img src="img/logo2.png"/>
</div>
<div class="navbar">
<ul>
<li style="float: left">Home</li>
<li>Contracts</li>
<li>About Us</li>
<li>Other</li>
<li> Release Notes</li>
<li> <a target="_blank" href="http://www.phpartnership.com">Pinnacle Health Partnership</a></li>
</ul>
</div>
</header>
Creates this
CSS Code: My entire stylesheet
body {
background-color: #fff;
margin: 0;
font-family: Arial;
color: #333;
}
header {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar {
display: block;
text-align: center;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.navbar li:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: white;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.navbar li:hover:before, navbar li:focus:before, .navbar li:active:before {
left: 0;
right: 0;
}
.navbar li a {
padding: 25px;
display: block;
height: 100%;
color: white;
text-decoration: none;
}
.title {
height: 80px;
padding: 2px;
background-color: #fff;
}
.container {
margin-top: 150px;
padding-top: 50px;
}
.home {
margin-top: 10px;
text-align: center;
padding: 40px !important;
}
.wrap {
width: 100%;
margin: 0 auto;
}
.left_col {
float: left;
width: 50%;
}
.right_col {
float: right;
width: 50%;
}
.right_col img {
width: 80%;
margin-top: 50px;
border: 2px solid black;
border-radius: 5px;
}
.left_col img {
width: 80%;
margin-top: 50px;
border: 2px solid black;
border-radius: 5px;
}
This is the JavaScript I tried to use to hide and show the div on click
<script>
$(index.php).ready(function(){
``$("#contract").click(function(){
$("<div class="contracts">").toggle();
});
});
</script>

guess you want smth like this : jsfiddle
first add jQuery to your local environment
use this <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
add it in the head section of your html. for more info check how to install jQuery
added html inside the .navbar
<ul class="aditional">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
added css :
.aditional {
position:absolute;
top:100%;
width:100%;
background:#000;
display:none;
}
.aditional li {
color:#fff;
}
added js :
$('.navbar ul li:nth-child(2) a').click(function() {
$(".aditional").slideToggle()
});
OR if you want a more responsive solution
check this :jsfiddle with target
use data-target on the li a like this
<li>Contracts</li>
<li>About Us</li>
added html :
<ul class="aditional contracts">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
<ul class="aditional aboutus">
<li>about</li>
<li>about</li>
<li>about</li>
<li>about</li>
</ul>
jq added :
$('.navbar ul li a').click(function() {
$(".aditional").slideUp()
var target = '.' + $(this).data('target');
$(target).slideDown();
})
OR u can target the href of the li a. simply add this
<li>Contracts</li>
<li>About Us</li>
------
<ul class="aditional" id ="contract">
....
<ul class="aditional" id ="about">
....
and js :
$('.navbar ul li a').click(function() {
$(".aditional").slideUp()
var target = $(this).attr('href');
$(target).slideDown();
})
see here jsfiddle
one of these solutions should work for you . let me know

Sliding Drop Down Menu

I have a drop down menu that I want to slide down when the Menu button is clicked and slide up when it's clicked again. Also slide up when clicking anywhere else in the document.
This is what I got so far: jsfiddle
HTML:
<nav>
<a class="dropdown-toggle" href="#" title="Menu">Menu</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
</nav>
Jquery:
$(function() {
// Dropdown toggle
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown').toggle(function() {
$('.dropdown').stop().animate({
top: '100%'
}, 'slow');
});
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
$('.dropdown').toggle(function() {
$('.dropdown').stop().animate({
top: '-100px'
}, 'slow');
});
}
});
});
The problem with what I did is the animation happens only once and only when clicking to open the drop down menu.

I am not sure if you are aware but there are .slideUp(), .slideDown() and .slideToggle() methods available in jQuery to do this sliding animation up and down business.
Below is the snippet for your reference:
var dropdownToggle = $('.dropdown-toggle');
var dropdown = dropdownToggle.next('.dropdown');
$(function() {
dropdown.slideUp(0);
$(document).on('click', function(e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
if (dropdown.is(':visible')) {
dropdown.stop(true).slideUp();
}
}
});
dropdownToggle.on('click', function() {
dropdown.stop(true).slideToggle();
});
});
body { padding: 2em; }
a {
text-decoration: none;
color: #000;
}
nav { position: relative; }
.dropdown-toggle {
padding: .5em 1em;
background: #777;
border-radius: .2em .2em 0 0;
}
ul.dropdown {
position: absolute;
top: 100%;
margin-top: .5em;
background: #777;
min-width: 12em;
padding: 0;
border-radius: 0 0 .2em .2em;
}
ul.dropdown li { list-style-type: none; }
ul.dropdown a {
text-decoration: none;
padding: .5em 1em;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav><a class="dropdown-toggle" href="#" title="Menu">Menu</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
</nav>
Notes:
You had CSS transition applied on the same element and you were also trying to apply animation via the use of .animate() method of jQuery on the same element. Both were conflicting each other. I have removed the CSS transition parts.
I also have removed the height: 0 part and you will notice that there is a dropdown.slideUp(0) line up there which basically applies a .slideUp() animation of 0 duration to immediately set height: 0 on the element.
Hope this helps.

Answering my own question for anyone who's interested, this is the code:
$(function() {
$('.dropdown').hide();
$('.dropdown-toggle').click(function(e) {
$('.dropdown').slideToggle(400);
$('.dropdown-toggle').slideDown('active');
$('.dropdown').toggleClass('is-active');
return false;
});
$(document).click(function() {
if ($('.dropdown').is(':visible')) {
$('.dropdown', this).slideUp();
$('.dropdown').removeClass('is-active');
}
});
});
body {
padding: 2em;
}
a {
text-decoration: none;
color: #000;
}
nav {
position: relative;
}
.dropdown-toggle {
padding: .5em 1em;
background: #777;
border-radius: .2em .2em 0 0;
}
.dropdown {
position: absolute;
margin-top: .5em;
background: #777;
min-width: 12em;
padding: 0;
top: 0;
left: 0;
-webkit-transform: translateY(-60px);
-ms-transform: translateY(-60px);
transform: translateY(-60px);
transition: transform .3s
}
.dropdown.is-active {
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
display: block
}
ul.dropdown li {
list-style-type: none;
}
ul.dropdown a {
text-decoration: none;
padding: .5em 1em;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav><a class="dropdown-toggle" href="#" title="Menu">Menu</a>
<ul class="dropdown">
<li>Menu Item
</li>
<li>Menu
</li>
<li>Settings
</li>
<li>Search
</li>
</ul>
</nav>
I used toggleClass and removeClass to add the animation I wanted and that's translate (the idea originally from Slide and Push Menu tutorial):
-webkit-transform: translateY(-60px);
-ms-transform: translateY(-60px);
transform: translateY(-60px);
transition: transform .3s