Develop Reference

Submenu levels do not work properly Vanilla JS

I am making a menu with pure Vanilla JS, because I want it to implement it in an Angular 8 project.
It is working good at some point, because it opens the hidden menu very good. The thing is that when I want to open a second level hidden menu , then it closes everything. For example if you click in 'Soluciones' link, then it opens the submenu very good. After that you must be able to click 'Correo y herramientas' in order to show a second level hidden menu, which is: Correo 1, Correo 2, Correo 3 links; but before showing this last links, it closes everything.
I have a codepen link to show this: https://codepen.io/Bungo808/pen/ZEBpmXG
Any advice would be helpfull!!
My HTML
<div class="red">
<nav id="nav" class="sub-menu open">
<ul class="list-unstyled">
<li id="subb">
<a class="link">Quiénes somos</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li>
<a class="link">Sobre eSource</a>
</li>
<li>
<a class="link">Amarello</a>
</li>
</ul>
</li>
<li id="subb">
<a class="link">Soluciones</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li id="subb">
<a class="link">Correo y herramientas</a>
<ul>
<li><a class="link">Correo 1</a></li>
<li><a class="link">Correo 2</a></li>
<li><a class="link">Correo 3</a></li>
</ul>
</li>
<li id="subb">
<a class="link">Infrastructure as a Service</a>
<ul>
<li><a class="link">Infra 1</a></li>
<li><a class="link">Infra 2</a></li>
<li><a class="link">Infra 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<div class="overlay"></div>
</div>
My JS
let list_items = document.querySelectorAll('#subb');
// Show Submenu
for (let i = 0; i < list_items.length; i++) {
list_items[i].addEventListener("click", show);
}
function show() {
this.classList.toggle("myClass");
console.log('I clicked it!')
}
A part of my CSS, which is the responsible to open the hidden menu
.sub-menu {
padding: 0 0 0 2%;
left: 0px;
top: 0;
transition: all 0.3s ease;
height: 100%;
width: 280px;
position: fixed;
margin: 0;
background-color: #f9f9f9;
border-radius: 0;
z-index: 10;
overflow: hidden;
}
.sub-menu > ul {
width: 100%;
height: 100%;
margin-top: 60px;
}
.sub-menu li {
position: relative;
display: block;
list-style: none;
padding: 2px 0 2px 14px;
margin-left: 0;
cursor: pointer;
color: white;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
&:first-child{
// border: 1px solid red;
}
}
.sub-menu li a {
color: #40465f;
font-size: 16px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul{
display: none;
background: white;
}
#subb.myClass > ul{
display: block;
}
.sub-menu ul ul ul{
display: none;
border: 1px solid red;
}

The click event is propagating over and over again. So eventually the class gets toggled off. To prevent this add .stopPropagation(); to your show() function like this:
function show(e) {
e.stopPropagation();
this.classList.toggle("myClass");
console.log('I clicked it!')
}

Highlighting an element in the menu by manipulating the opacity

html:
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1" onclick="checklist(this)">
<button onclick="myFunction()">g</button>
</li>
<li id="item2">
<button onclick="myFunction2()">a </button>
</li>
<li id="item3">b </li>
<li id="item4">c </li>
<li id="item5">d </li>
<li id="item6">e </li>
<li id="item7">f </li>
</ul>
</div>
CSS:
lu, li {
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu {
width: 150px;
height: 350px;
}
.menu li {
position: relative;
top: 150px;
bottom: 0;
left: 725px;
right: 0;
margin: auto;
border-style: none;
}
.permahover li {
opacity: 1;
left: 10%;
}
.headlines li {
font-size: 1.5em;
color: #000000;
transition: all 0.5s;
cursor: pointer;
}
.headlines:hover li {
/* PARENT HOVER */
opacity: 0.4;
cursor: pointer;
/* Dim all */
}
.headlines li:hover {
/* SINGLE HOVER */
opacity: 1;
/* Max one */
color: #000000;
cursor: pointer;
}
In the current code when the user hover over an element, the other elements in the menu will reduce in opacity. How can i as well do the same procedure after clicking an element.. By clicking an element it'll keep its opacity however the unclicked elements will reduce in opacity, thus highlighting the selected element.

You will need javascript for this*. For example:
var $li = $('.headlines li').click(function() {
var state = !$(this).hasClass('active');
$(this).parent().toggleClass('active', state);
$li.removeClass('active');
$(this).toggleClass('active', state);
});
ul, li {
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu {
width:150px;
height: 350px;
}
.menu li {
position: relative;
right: 0;
margin: auto;
border-style:none;
}
.permahover li {
opacity: 1;
left: 10%;
}
.headlines li {
font-size:1.5em;
color:#000000;
transition: all 0.5s;
cursor: pointer;
}
.headlines:hover li,
.headlines.active li {
opacity:0.4;
cursor: pointer;
}
.headlines li:hover,
.headlines li.active {
opacity: 1;
color:#000000;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1" onclick="checklist(this)">
<button onclick="myFunction()">g</button>
</li>
<li id="item2">
<button onclick="myFunction2()">a</button>
</li>
<li id="item3">b</li>
<li id="item4">c</li>
<li id="item5">d</li>
</ul>
</div>
* technically it's possible to do it with pure CSS, but the HTML structure will become complex and not that semantic.

CSS affecting nav bar and slider

Basically the problem I am having is that I have some CSS that is affecting both my nav bar and slider, because they are both using and essentially the nav bar is working but the slider is being affected.
I am still pretty new to coding so I didn't know what specifically to search online to fix this problem, any help is greatly appreciated.
HTML being affected.
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/barber4.jpg" alt="" style="margin:0; padding:0;display:block;">
</li>
<li>
<img src="img/menuew-2.jpg" alt="" style="margin:0; padding:0;display:block;">
</li>
</ul>
</div>
NAV BAR
<!--section1-->
<section id="top" class="Back to top">
<img alt="" style="position: absolute;left:312px;width:1280px;" width="1599" height="276" src="img/borderblacktop.png">
<div class="top-bar-container">
<div class="top-bar">
</div>
<nav class="nav-bar">
<ul>
<li>About</li>
<li><a href="#photos" >Gallery</a></li>
<li>Menu</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="header-container">
<div class="header">
</h3>
<h4>
NAV BAR CSS:
.top-bar-container .top-bar {
width: 800px;
}
.top-bar-container .top-bar .logo {
float: left;
}
.top-bar-container .top-bar .logo span {
color: #27AD60;
}
.top-bar-container .nav-bar {
float: right;
}
.top-bar-container .nav-bar ul li {
list-style-type: none;
display: inline-block;
padding: 21px 27px;
font-size:15px;
}
.top-bar-container .nav-bar ul li a:not(.active) {
text-decoration: none;
color: white;
}
.top-bar-container .nav-bar .active {
color: white;
text-decoration: none;
padding-top:34px;
}
ul {
list-style: none;
}
ul li {
display: inline-block;
}
ul li a {
display: block;
padding: 16px;
color: grey;
text-decoration: none;
position: relative;
}
ul li a:hover, ul li a.selected{
color:white;
}
ul li a.selected:before, ul li a:hover:before {
content: '';
width: 100%;
position: absolute;
top: -19px;
left: 0;
height: 3px;
background: white;
}
h3{
font-size: 121.5%;
line-height: 2.;
font-family: 'PT Sans', sans-serif;
text-align: center;
}

Your issue is that the CSS selectors are not descriptive enough. ul and li will target both HTML sections.
You can change them to classes or ids so that the selectors are more descriptive.
I would recommend reading up on CSS selectors as it will make HTML and CSS a lot easier.

Need for on click display responsive menus using jQuery

In below code the Purchase, sale, and new menus have some multilevel menus which need to open onClick using jQuery also when click on another menu the first one multilevel menu should be close and then this menu should be open with some transition effects.
$('#handle').on('click', function() {
$('ul').toggleClass('showing');
});
$('li').on('click', function(e) {
$(this).next('li li').toggleClass('showingg');
});
#charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
}
.container {
margin: 0;
padding: 0;
}
#handle {
display: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
-moz-transition: linear 0.4s;
}
li {
float: left;
}
li a {
text-decoration: none;
display: block;
padding: 15px;
background: #0C9;
color: #FFF;
border-bottom: 1px solid #ccc;
}
li a:hover {
background: #333;
}
li ul {
display: none;
}
li:hover > ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
ul ul ul {
left: 100%;
top: 0;
}
ul:before,
ul:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
ul:after {
clear: both;
}
#media screen and (max-width: 480px) {
#handle {
display: block;
background: #066;
color: #fff;
padding: 10px;
text-align: center;
box-sizing: border-box;
font-size: xx-large;
cursor: pointer;
}
li {
width: 100%;
text-align: center;
font-size: x-large;
}
ul {
max-height: 0;
overflow: hidden;
}
li a:hover {
background: #0C9;
}
.showing {
max-height: 200em;
}
li:hover > ul {
position: relative;
}
/*li li {
display:none;
}*/
li li:hover > ul {
left: 0;
position: relative;
}
li li a {
background: #CCC;
}
.showingg {
display: block;
;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="nav1.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<nav class="showing">
<div id="handle">Menu</div>
<ul id="nav">
<li>Available stock
</li>
<li>
Purchase +
<ul>
<li>
Purchase Return +
<ul>
<li>Return1
</li>
</ul>
</li>
</ul>
</li>
<li>
Sale +
<ul>
<li>
Sale Return +
<ul>
<li>Return2
</li>
</ul>
</li>
</ul>
</li>
<li>Cash Recieve
</li>
<li>Cash Payment
</li>
<li>
New +
<ul>
<li>New Product
</li>
<li>New Supplier
</li>
<li>New Town
</li>
<li>New Customer
</li>
</ul>
</li>
<li>Opening Stock
</li>
<li>Gate Pass
</li>
<li>Sale History
</li>
</ul>
</nav>
</div>
</body>
</html>

toggle images for expand all and collapse all

I am trying to swap images of collapse all and expand all on click but i am reallly not getting it please can any one help me ... thanks in advance
here is the the link for the sample
http://www.ornusweb.com/showcase/checking/collapsible-menu.html
everything is working fine except the expan all collapse all buttons wen we click on it.
it should swap images
please help me !!!
Here is the css
body {
font: 10pt Arial, Helvetica, Sans-serif;
}
a {
text-decoration: none;
}
#example1,
#example2,
#example3,
#example4,
#example5 {
float: left;
}
.expand_all{
cursor: pointer;
}
.collapse_all {
cursor: pointer;
}
.example_menu {
font-size: 90%;
list-style: none;
margin: 0;
padding: 0;
vertical-align: top;
width: 624px;
}
.example_menu ul {
display: none;
list-style: none;
padding: 0;
}
#menu1,
#menu2,
#menu3,
#menu4,
#menu5 {
margin: 0;
}
#menu1 li,
#menu2 li,
#menu3 li,
#menu4 li,
#menu5 li,
.example_menu li {
background-image: none;
margin: 0;
padding-bottom: 1px;
}
.example_menu ul ul {
display: block;
}
.example_menu ul ul li a {
padding-left: 20px;
width: 109px;
}
.example_menu a {
color: #000;
cursor: pointer;
display: block;
font-weight: bold;
margin-left: 0;
padding: 10px 2px 2px 17px;
width: 605px;
height: 24px;
}
.example_menu a.expanded {
background: #E8E8E8 url('images/minusimg1.png') no-repeat 592px 50%;
}
.example_menu a.collapsed {
background: #E8E8E8 url('images/plusimg1.png') no-repeat 592px 50%;
}
.example_menu a:hover {
text-decoration: none;
}
.example_menu ul a {
background: #e8e8e8;
border-top: 2px solid #fff;
color: #000;
display: block;
font-weight: normal;
padding: 2px 2px 2px 10px;
width: 119px;
}
.example_menu ul a:link {
font-weight: normal;
}
.example_menu ul a:hover {
background : #f5f5f5;
text-decoration: underline;
}
.example_menu li.active a {
background: #fff;
}
.example_menu li.active li a {
background: #e8e8e8;
}
#menu1 li.footer,
#menu2 li.footer,
#menu3 li.footer,
#menu4 li.footer,
#menu5 li.footer,
.example_menu .footer {
background: transparent url('images/footer.jpg') no-repeat 0 0;
border-top: 2px solid #fff;
height: 9px;
line-height: 15px;
margin: 0 0 10px 0;
width: 131px;
}
.example_menu .footer span {
display: none;
}
/* nadeem css */
.newstyles{ font: 20px/18px arial;color: #0B0B0C;margin: 5px 0px 20px 5px;}
.newstyles li{ height: 32px;font: bold 12px/32px arial;color: #0B0B0C;}
.newstyline{clear: both;height: 1px;background-color: #E6E6E6;width: 100%;margin: 1px 0px 3px 0px;}
}
here is the js
$(document).ready(function() {
setTimeout(function() {
// Slide
$('#menu1 > li > a.expanded + ul').slideToggle('medium');
$('#menu1 > li > a').click(function() {
$(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
});
$('#example1 .expand_all').click(function() {
$('#menu1 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').slideDown('medium');
});
$('#example1 .collapse_all').click(function() {
$('#menu1 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').slideUp('medium');
});
}, 250);
});
and here is the html
<div id="example1">
<div><a class="expand_all"><img src="images/close.jpg" class="img-swap" /></a><a class="collapse_all"><img src="images/open.jpg" alt="" /></a></div>
<ul id="menu1" class="example_menu">
<li><a class="expanded">Section A</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
<li><a class="expanded">Section B</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
<li><a class="expanded">Section C</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
</ul>
</div>

Guessing it is the two images in the top, you could do this:
<div>
<a class="expand_all" style="display: none;" onclick="$('.expand_all').hide();$('.collapse_all').show()">
<img class="img-swap" src="images/toggle-buttons_01.png">
</a>
<a class="collapse_all" onclick="$('.expand_all').show();$('.collapse_all').hide()" style="display: inline;">
<img alt="" src="images/toggle-buttons_02.png">
</a>
</div>
Simply hiding the irrelevant one....not really swapping images though.