We Keep Coding

toggle menu with JavaScript. Target multiple variables with 1 click function

I am trying to make a menu that collapses on click.
I also want to add some more changes on that same function.
For instance I want to change the background of another object.
In this snippet you can see it works on only the first link. The other toggleable link is not targeted.
var pill = document.querySelector(".navpill");
var sub = document.querySelector(".submenu");
pill.onclick = () => {
sub.classList.toggle("collapse");
pill.classList.toggle("active");
}
.mainmenu {
background-color: #1f1f1f;
}
.navpill {
padding: 15px;
}
.navpill.active {
background: red;
}
.navpill a {
text-decoration: none;
color: white;
}
.submenu {
display: none;
}
.submenu.collapse {
display: block;
}
<div>
<ul class="mainmenu">
<li class="navpill">Link collapse 1
<ul class="submenu">
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
</ul>
</li>
<li class="navpill">Link collapse 2
<ul class="submenu">
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
</ul>
</li>
<li class="navpill">no link</li>
<li class="navpill">no link</li>
</ul>
</div>
From a previous answer I got this piece of code which makes it work on all the links, but I have no idea how to add more var and toggles to the function.
var pills = document.querySelectorAll(".expand");
pills.forEach(function(pill) {
pill.onclick = () => {
var sub = pill.querySelector(".submenu");
sub.classList.toggle("collapse");
}
});
I tried adding this to the code but it does not work.
var navpill = pill.querySelector(".navpill");
navpill.classList.toggle("active");
If possible I would also like a way of clearing what has been done when clicked on the next submenu.
If I use the code above. It stays open when I click on the second link and then they are both open. I want the first one to close if the second is clicked.

I think this is probably closer to what you want.
(It's unclear if you wanted the submenu items to be highlighted when they're clicked - currently, clicking them just collapses the menu anyway so you wouldn't see. Also I removed the hrefs because they aren't adding anything useful.)
var pills = document.querySelectorAll(".expand");
var subs = document.querySelectorAll(".submenu");
pills.forEach(function(pill) {
pill.addEventListener("click", function() {
var sub = pill.querySelector(".submenu");
var alreadyOpen = false;
if (sub.classList.contains("collapse")) alreadyOpen = true;
pills.forEach(function(pill2) {
pill2.classList.remove("active");
});
subs.forEach(function(sub2) {
sub2.classList.remove("collapse");
});
if (!alreadyOpen) {
sub.classList.toggle("collapse");
this.classList.add("active");
}
});
});
.expand.active {
background-color: red;
}
.expand.active > .submenu
{
background-color: #1f1f1f;
}
.mainmenu {
background-color: #1f1f1f;
}
.navpill {
padding: 15px;
color: white;
}
.submenu {
display: none;
}
.submenu.collapse {
display: block;
}
<div>
<ul class="mainmenu">
<li class="navpill expand">Link collapse 1
<ul class="submenu">
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
</ul>
</li>
<li class="navpill expand">Link collapse 2
<ul class="submenu">
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
<li class="navpill">sub Link 1</li>
</ul>
</li>
<li class="navpill">no link</li>
<li class="navpill">no link</li>
</ul>
</div>

Open menu when hover on icon menu JQUERY

I have been searching for a solution but I can't find any that fits to what I woluld like to get. I have an icon and want the dropdown menu opened when HOVER in sreen size larger than 980px, and then when CLICK in screen size smaller than 980px.
This is the code.
/*Hide menu by default*/
$("#menu").hide();
/*When menu button is clicked, toggle the menu*/
$("#menu-btn").click(function() {
$("#menu").slideToggle();
});
$("#menuser").hide();
/*When menu button is clicked, toggle the menu*/
$("#ser_btn").click(function() {
$("#menuser").slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Hamburger menu toggle button-->
<div id="menu-btn">
<img src="images/icon.png" style="height:50px; width:50px;">
</div>
<!--Menu-->
<nav id="menu">
<ul>
<li>INICIO</li>
<li>LA BELLE</li>
<li id="ser_btn">SERVICIOS
<ul id="menuser">
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
</ul>
</li>
<li>NOTICIAS</li>
<li>CONTACTO</li>
</ul>
</nav>
I would appreciate any help.

$(function() {
// check the event to listen to
var evt = $(window).width() > 980 ? // if the window width is greater than 980
"mouseenter mouseleave" : // then lesten for mouseenter and mousleave
"click"; // otherwise a click event
// hide it by default
$("#menu").hide();
// on the event evt toggle the menu
$("#menu-btn").on(evt, function() {
$("#menu").slideToggle();
});
// hide it by default
$("#menuser").hide();
// on the event evt toggle the menu
$("#ser_btn").on(evt, function() {
$("#menuser").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Hamburger menu toggle button-->
<div id="menu-btn">
<img src="images/icon.png" style="height:50px; width:50px;">
</div>
<!--Menu-->
<nav id="menu">
<ul>
<li>INICIO</li>
<li>LA BELLE</li>
<li id="ser_btn">SERVICIOS
<ul id="menuser">
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
</ul>
</li>
<li>NOTICIAS</li>
<li>CONTACTO</li>
</ul>
</nav>

I would just do this using CSS in most cases:
<div id="menu-btn">
<img src="images/icon.png" style="height:50px; width:50px;">
</div>
<!--Menu-->
<nav id="menu">
<ul>
<li>INICIO</li>
<li>CONTACTO</li>
</ul>
</nav>
<style>
nav#menu { display: none }
#menu-btn:hover + nav#menu, nav#menu:hover { display:block }
</style>
Or more often I would nest the nav inside the button
<div id="menu-btn">
<img src="images/icon.png" style="height:50px; width:50px;">
<nav id="menu">
<ul>
<li>INICIO</li>
<li>CONTACTO</li>
</ul>
</nav>
</div>
<style>
#menu-btn nav { display: none }
#menu-btn:hover nav, #menu-btn nav:hover { display:block }
</style>

jQuery: change text color of a fixed top navbar at the scrolling of the page

I need help for my personal website. I want to make a one page site with a fixed top navbar (with transparent background). At the scrolling of the page, the color of the menu elements must change dinamically from black to white on the sections that have a dark background (they have a ".dark-bg" class) and return white on the other sections. All sections are 100vh height (except for the menu, of course). This is the HTML main structure of the site:
<section class="section--menu fixed-header">
<nav class="menu" id="navigation">
<ul class="menu__list pull-md-right">
<li class="menu__item menu__item--current">
<a class="menu__link" data-target="intro-fabio">home</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="about-fabio">about</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="skills-fabio">skills</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="works-fabio">works</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="contacts-fabio">contacts</a>
</li>
</ul>
</nav>
</section>
<!-- HOME
======================================================== -->
<section id="intro-fabio">
</section>
<!-- ABOUT
======================================================== -->
<section id="about-fabio" class="dark-bg">
</section>
<!-- SKILLS
======================================================== -->
<section id="skills-fabio">
</section>
<!-- WORKS
======================================================== -->
<section id="works-fabio" class="dark-bg">
</section>
<!-- CONTACTS
======================================================== -->
<section id="contacts-fabio">
</section>
I wrote this jQuery script but it seems to work only for the last section with ".dark-bg" class.
$(document).ready(function() {
$(".dark-bg").each(function() {
detectBg( $(this) );
});
function detectBg(sezione) {
$(window).scroll(function() {
var finestra = $(window).scrollTop();
var sezCurr = sezione.offset().top;
var sezNext = sezione.next().offset().top;
if (finestra >= sezCurr && finestra < sezNext) {
$('.menu__link').css("color", "#ebebeb");
}
else {
$('.menu__link').css("color", "#1c1c1c");
}
});
}
});
Thanks in advance!

You need to handle scroll event of the window, and in that handler, check if any of the dark section is under the menu, if so, then change the color of the menu links. Here is an example of changing the color for all links, but it can be easily extended to do it separately for each link:
$(window).scroll(function() {
var vpHeight = $(window).height();
var isBlack = false;
$(".dark-bg").each(function(i, section) {
if(isBlack) {
return;
}
var offset = $(section).offset().top - $(window).scrollTop();
if(((offset + vpHeight) >= 0) && ((offset + vpHeight) <= vpHeight)) {
isBlack = true;
return;
}
});
$(".menu__link").css("color", isBlack ? "white" : "black");
});
body {
padding: 0;
margin: 0;
}
ul {
position:fixed;
background: orange;
padding: 0;
margin: 0;
list-style-type: none;
}
ul > li {
float: left;
padding: 0 4px;
}
section {
background:red;
height: 100vh;
}
.dark-bg {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu__list pull-md-right">
<li class="menu__item menu__item--current">
<a class="menu__link" data-target="intro-fabio">home</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="about-fabio">about</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="skills-fabio">skills</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="works-fabio">works</a>
</li>
<li class="menu__item">
<a class="menu__link" data-target="contacts-fabio">contacts</a>
</li>
</ul>
<!-- HOME
======================================================== -->
<section id="intro-fabio">
</section>
<!-- ABOUT
======================================================== -->
<section id="about-fabio" class="dark-bg">
</section>
<!-- SKILLS
======================================================== -->
<section id="skills-fabio">
</section>
<!-- WORKS
======================================================== -->
<section id="works-fabio" class="dark-bg">
</section>
<!-- CONTACTS
======================================================== -->
<section id="contacts-fabio">
</section>

need to disable fadeout function for the dropdown (only) menu

I have a problem with my menu in mobile mode. onClick it fadesOut. I want to keep this setting, but I don't want it to fadeOut when one clicks on the dropdown part.
here is link: http://jsfiddle.net/zLLzrs6b/3/
appreciate your help!
html:
<nav id="nav-wrap"> <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll mobile" href="#about">about</a>
</li>
<li><a class="smoothscroll mobile" href="#documents">blog</a>
</li>
<li class="nav-item">dropdown
<ul class="langop">
<li>otion 1
</li>
<li>otion 2
</li>
</ul>
</li>
</ul>
</nav>
css:
.langop {
display:none;
position: relative;
width:auto;
}
.nav-item:hover .langop {
display: block;
}
java:
var toggle_button = $("<a>", {
id: "toggle-btn",
html: "Menu",
title: "Menu",
href: "#"
});
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");
nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);
toggle_button.on("click", function (e) {
e.preventDefault();
nav.slideToggle("fast");
});
if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function () {
if (toggle_button.is(':visible')) nav.addClass('mobile');
else nav.removeClass('mobile');
});
$('ul#nav li a').on("click", function () {
if (nav.hasClass('mobile')) nav.fadeOut('fast');
});

See this demo.
$('ul#nav > li > a').on("click", function () {
if (nav.hasClass('mobile'))
nav.fadeOut('fast');
});

Find the clicked element by using event.target, if it's dropdown part then don't hide
var toggle_button = $("<a>", {
id: "toggle-btn",
html: "Menu",
title: "Menu",
href: "#"
});
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");
nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);
toggle_button.on("click", function(e) {
e.preventDefault();
nav.slideToggle("fast");
});
if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function() {
if (toggle_button.is(':visible')) nav.addClass('mobile');
else nav.removeClass('mobile');
});
$('ul#nav li a').on("click", function(e) {
var target = $(".langop");
if (!target.is(e.target) //checking clicked item is the dripdown list
&& target.has(e.target).length === 0 //chekking clicked element is inside the dropdown
&& nav.hasClass('mobile')) {
nav.fadeOut('fast');
}
});
.langop {
display: none;
position: relative;
width: auto;
}
.nav-item:hover .langop {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll mobile" href="#about">about</a>
</li>
<li><a class="smoothscroll mobile" href="#documents">blog</a>
</li>
<li class="nav-item">dropdown
<ul class="langop">
<li>otion 1
</li>
<li>otion 2
</li>
</ul>
</li>
</ul>
</nav>

need help for javascript menu for "menuTrigger"

need your help for menuTrigger javascript
I am making menu like, firstly display only titles but when clicked on menu icon(which right now dark grey box) it expands with further submenus.
I have almost achieved what I want, but (stuck)I want fade effect or animation effect when clicking on menu button to open menu.Which I am not getting proper syntax to put, plz do help me with that achieving effect.
You can check code on link:
http://jsfiddle.net/kBpqa/1/
JS:
(function ($) {
$(document).ready(function() {
/* --------- Main Submenu Open/Close --------- */
var menuOpen = false;
// Close menu when pointer leaves expanded menu
$('#headerContainer').mouseleave(
function() {
if( menuOpen == true)
closeSubMenu();
});
// Open/Close menu when user clicks on trigger link
$('.menuTrigger').click(
function(e){
e.preventDefault();
if( menuOpen == true)
closeSubMenu();
else
openSubMenu();
});
// Opens Main Submenu
function openSubMenu(){
$('#mainMenu').addClass('openMenu');
$('#mainMenu').find('ul.menu li ul').show();
var menuHeight = $('#mainMenu').height();
$('#header').height(menuHeight);
$('#mainMenu').find('ul.menu li ul').delay(300).css({'opacity' : 1});
$('#header .extIcons').show(500);
// $('#header .extIcons a').delay(500).css({'opacity' : 1});
// contractLogo();
if ( $(window).width() < 1400 ) {
$('#logo a').html('');
};
menuOpen = true;
}
// Closes Main Submenu
function closeSubMenu(){ $('#mainMenu').removeClass('openMenu');
$('#mainMenu').find('ul.menu li ul').css({'opacity' : 0});
$('#mainMenu').find('ul.menu li ul').delay(500).hide();
var menuHeight = $('#mainMenu').height();
$('#header .extIcons').hide();
$('#header').height(menuHeight);
// contractLogo();
$('#logo a').text('');
menuOpen = false;
}
/* --------- END Main Submenu Open/Close --------- */
});
}
(jQuery));;
HTML:
<div id="header">
<div id="headerContainer">
<div class="block block-menu-block">
<div id="mainMenu">
<ul class="menu">
<li class="first expanded menu-mlid-601 menu-601">About Us
<ul class="menu">
<li class="first leaf menu-mlid-606 menu-606">Title1</li>
<li class="leaf menu-mlid-585 menu-585">Title2</li>
<li class="leaf has-children menu-mlid-1409 menu-1409">Title3</li>
<li class="leaf has-children menu-mlid-616 menu-616">Title4</li>
</ul>
</li>
<li class="expanded active-trail active menu-mlid-1107 menu-1107">Work
<ul class="menu">
<li class="first leaf menu-mlid-1138 menu-1138">Title1</li>
<li class="leaf menu-mlid-1134 menu-1134">Title1</li>
<li class="leaf menu-mlid-1137 menu-1137">Title1</li>
<li class="leaf menu-mlid-1135 menu-1135">Title1 </li>
<li class="leaf menu-mlid-1260 menu-1260">Title1</li>
<li class="leaf menu-mlid-1261 menu-1261">Title1</li>
</ul>
</li>
<li class="expanded menu-mlid-1237 menu-1237">Research
<ul class="menu">
<li class="first leaf menu-mlid-1138 menu-1138">Title1</li>
<li class="leaf menu-mlid-1134 menu-1134">Title1</li>
<li class="leaf menu-mlid-1137 menu-1137">Title1</li>
<li class="leaf menu-mlid-1135 menu-1135">Title1 </li>
<li class="leaf menu-mlid-1260 menu-1260">Title1</li>
<li class="leaf menu-mlid-1261 menu-1261">Title1</li>
</ul>
</li>
<li class="expanded menu-mlid-1103 menu-1103">Current Events
<ul class="menu">
<li class="first leaf menu-mlid-1138 menu-1138">Title1</li>
<li class="leaf menu-mlid-1134 menu-1134">Title1</li>
<li class="leaf menu-mlid-1137 menu-1137">Title1</li>
<li class="leaf menu-mlid-1135 menu-1135">Title1 </li>
<li class="leaf menu-mlid-1260 menu-1260">Title1</li>
<li class="leaf menu-mlid-1261 menu-1261">Title1</li>
</ul>
</li>
<li class="last expanded menu-mlid-1105 menu-1105">Contact</li>
</ul>
<div class="menuTrigger">Menu</div>
</div>
</div>
</div><!-- end headerContainer -->
</div><!-- end header -->
CSS:
div.block-menu-block{float:right; margin-top:0px;background-color: #e7e7e7;}
#headerContainer{background-color:#e7e7e7;}
#mainMenu{margin:0;padding:0;overflow:auto;}
#mainMenu > ul{margin:0;margin-right:65px;padding:0;list-style-type:none;}
#mainMenu li{margin:0;position:relative;}
#mainMenu > ul > li > a{color:#111 !important;display:block;padding:1.6em 1em;font-weight:600; font-size:17px;}
#header a:hover{color:#111 !important;}
#mainMenu > ul > li{float:left;}
div.menuTrigger{padding:.8em 1em 0 0;margin:0;float:right;background:#ccc}
.menuTrigger a{width:40px;height:40px;text-indent:9999em;display:block;overflow:hidden;margin-top:6px;background:url(../images/menu-trigger.png) no-repeat;}
.menuTrigger a:hover{background-position:0 -40px;}
#mainMenu > ul > li > ul{margin:0 3em 3em 1.5em !important;padding:0;display:none; font-size:13px; line-height:1.2em;}
#mainMenu > ul > li > ul > li{max-width:9em;padding:.4em 0;font-size:1em !important;display:block;}
#menu .first leaf menu-mlid-606 menu-606 a{ font-size:14px;}
#mainMenu > ul > li > ul > li > a{font-weight:normal;color:#999 !important;}
li.current{background:#222222;float:left;}

You can use slideDown() or slideUp() instead of hide() function. And you can user fadeIn() instead of .dealy(500).css({opacity:1}) . To make your animation more smooth you can you easing in jquery for most of the functions.
Updated fiddle

You can use jquery slideToggle() for this. check this fiddle: fiddle
$('#mainMenu').find('ul.menu li ul').slideToggle('slow');