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

Submenu disconnect on mouseover and cant navigate to submenu as well

I am trying to create a submenu, but had to keep the submenu HTML out of the main menu, and on mouseover it will show hide, but its not working as expected, I think I am not trying with a good approach, can someone look in to this and suggest.
Here is the JSfiddle demo
Notes
1. Problem is, when you mouseover on "Shop" and try to enter submenu, its hiding.
2. I had to keep the submenu html out of the main navigation as submenu has to be in full width.
3. I am also looking to add some transition effects, I know using display none/block, transition will not work but can somebody please suggest?
$('.shop').mouseenter(function(){
$('.primary-subnav').show()
}).mouseleave(function(){
$('.primary-subnav').hide()
});
.nav{float:left; width:100%;}
.primarynav {
list-style: none;
margin: 0;
padding: 0;
font-size: 15px;
text-align: right;
}
.primarynav > li {
list-style: none;
display: inline;
}
.primarynav > li > a {
display: inline-block;
text-decoration: none;
color: #333;
padding: 0 15px;
height: 67px;
line-height: 67px;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
}
.primarynav > li > a:hover {
background-color: #c0e5da;
}
.primary-subnav {
position: absolute;
left: 0;
top: 64px;
width: 100%;
border-top: 2px solid #c0e5da;
background-color: rgba(255,0,0,0.9);
min-height: 350px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
<ul class="primarynav">
<li>Shop </li>
<li>Nav Item </li>
<li>Nav Item </li>
<li>Nav Item</li>
<li>Nav Item</li>
</ul>
</div>
<div class="primary-subnav">
<div class="container"> Submenu Wrapper </div>
</div>

you can attach the same event handlers as you have attached to mouseover and mouseleave events of .shop to .primary-subnav.
$('.shop').mouseover(function(){
$('.primary-subnav').fadeIn(1000);
}).mouseleave(function(){
$('.primary-subnav').hide();
});
$('.primary-subnav').mouseover(function(){
$('.primary-subnav').show();
}).mouseleave(function(){
$('.primary-subnav').hide();
});
.nav{float:left; width:100%;}
.primarynav {
list-style: none;
margin: 0;
padding: 0;
font-size: 15px;
text-align: right;
}
.primarynav > li {
list-style: none;
display: inline;
}
.primarynav > li > a {
display: inline-block;
text-decoration: none;
color: #333;
padding: 0 15px;
height: 67px;
line-height: 67px;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
}
.primarynav > li > a:hover {
background-color: #c0e5da;
}
.primary-subnav {
position: absolute;
left: 0;
top: 64px;
width: 100%;
border-top: 2px solid #c0e5da;
background-color: rgba(255,0,0,0.9);
min-height: 350px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
<ul class="primarynav">
<li>Shop </li>
<li>Nav Item </li>
<li>Nav Item </li>
<li>Nav Item</li>
<li>Nav Item</li>
</ul>
</div>
<div class="primary-subnav">
<div class="container"> Submenu Wrapper </div>
</div>

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

Highlighting an active class in an unordered list when scrolling

I am currently trying to implement smooth scrolling with a position indicator in my navigation menu. I want to be able to change the color or distinguish between the active part of the fixed nav bar when scrolling (i.e. when in the about section the about part of the navbar is highlighted). Does anyone have some advice? I don't want to use bootstrap or a plugin.
Here is the html for my nav bar:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<ul class="top-menu">
<li id="home">HOME</li>
<li id="about">ABOUT</li>
<li id="contact">CONTACT</li>
</ul>
</div>
</nav>
SCSS:
nav{
/* spacing */
text-align: center;
/*font*/
font-size: 30px;
/* alignment */
vertical-align: middle;
z-index: 9999;
border-radius: 0;
position: fixed;
/* dimensions */
height: 80px;
width: 100%;
top: 0;
border-width: 5px;
ul{
margin-top:15px;
}
ul li{
vertical-align: middle;
margin: 10px;
display: inline-block;
margin-top:4px;
text-decoration: none;
}
ul li a, ul li a.active{
color: white;
vertical-align: middle;
margin: 5px;
font-size: 30px;
text-decoration: none;
-webkit-transition: .5s all ease-out;
-moz-transition: .5s all ease-out;
transition: .5s all ease-out;
}
}
Javascript:
$(function() {
var pgurl = window.location.href.substr( window.location.href.lastIndexOf("/") + 1);
$(".navbar ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
});

jQuery Submenu not disappearing unless it is hovered once

Here is the html code:
<div class="main-nav main-nav-default">
<div class="container">
<div class="main-nav-logo">
<a class="logo-color" href="index.html">Centaur <span class="brand">Research</span></a>
</div>
<div class="main-nav-links">
<ul id="responsive">
<li>Home</li>
<li>About</li>
<li class="dropdown">Services
<ul class="dropdown-lists">
<li>Research Sector</li>
<li>Online Research</li>
<li>Travel Research</li>
</ul>
</li>
<li class="dropdown">Panel
<ul class="dropdown-lists">
<li>Discussion Group</li>
</ul>
</li>
<li>Contact</li>
<li class="dropdown">Language
<ul class="dropdown-lists">
<li><div class="translate"><div id="google_translate_element"></div></div> <script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-38654447-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></li>
</ul>
</li>
</li>
</ul>
</div>
</div>
Here is the jQuery:
$(".dropdown-lists").hide();
$(".dropdown").mouseenter(function(){
$(this).find(".dropdown-lists").slideDown();
$(".dropdown-lists").mouseleave(function(){
$(this).slideUp();
});
});
Basically the thing is that the dropdown works perfectly when I hover over it but it doesnt disappear unless I hover over the submenu thats .dropdown-lists class. If I hover over the .dropdown class and navigates away without hovering over the submenu the submenu doesn't disappear. It stays still unless I hover it over at least once.
I understand my jQuery only allows to slide the menu Up when it is hovered once, I want to know a code combination that would work even if I don't hover over the submenu.
Additionally here is the Dropdown CSS code, I doubt the the submenu somehow is not a child element of the parent main-nav-link or #responsive:
.main-nav-links {
padding: 20px 0px 20px 0px;
}
#responsive {
text-align: right;
}
#responsive li {
position: relative;
text-align: right;
display: inline-block;
}
#responsive li > a {
font-family: "Open Sans";
font-weight: 700;
padding-right: 10px;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#media (max-width: 992px){
#responsive li > a {
font-size: 12px;
}
}
#responsive li > a:hover {
color: #19B5FE;
}
.dropdown-lists {
text-align: center;
}
#responsive li .dropdown-lists li {
list-style: none;
margin-left: -29px!important;
border-top: 1px solid rgba(60,60,60,0.9);
padding: 10px 0px 10px 0px;
}
#responsive li .dropdown-lists li > a {
color: rgba(204,204,204,0.8);
font-size: 12px;
font-weight: 400;
}
#responsive li .dropdown-lists li > a:hover{
color: #fff;
}
#responsive li .dropdown-lists {
width: 200px;
position: absolute;
top: 200%;
background: rgba(51, 51, 51, 0.8);
}

Update your jquery like this.
$(".dropdown-lists").hide();
$(".dropdown").mouseenter(function(){
$(this).find(".dropdown-lists").slideDown();
}).mouseleave(function(){
$(this).find(".dropdown-lists").slideUp();
});
DEMO
EDIT:
Additional problem comes for the dropdown in your latest fiddle because of the top property you have used in the dropdown CSS. Update the following class in your CSS.
#responsive li .dropdown-lists {
width: 200px;
position: absolute;
top: 100%; /* It was 200% earlier */
background: rgba(51, 51, 51, 0.8);
}
.dropdown
{
height:40px;
}
Updated DEMO