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!')
}

JavaScript - Close submenu if user selects another menu item or clicks outside of menu

I'm trying to figure out how to close sub menu drop downs, if a user selects another menu or clicks outside of the menu (clicks something else on the page). I've read and tried a few different ways, but haven't gotten anywhere. I Just confused myself as to what is the best or right approach. Using regular JavaScript only - trying to learn.
HTML
<div class="container">
<div class="inner-wrap">
<ul id="filters">
<li>one
<ul class="dropM">
<li>I belong to one</li>
</ul>
</li>
<li>two
<ul class="dropM">
<li>I belong to two</li>
</ul>
</li>
<li>three
<ul class="dropM">
<li>I belong to three</li>
</ul>
</li>
<li>four
<ul class="dropM">
<li>I belong to four</li>
</ul>
</li>
</ul>
</div>
CSS
html {
box-sizing: border-box;
background:#ffc600;
font-family:'helvetica neue';
font-size: 20px;
font-weight: bold;
}
body {
margin: 0 auto;
padding: 50px 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
div.container {padding: 10px; background: #bada55; text-align: center;}
div.inner-wrap {margin: 0 auto; position: relative; display: inline-block;}
ul#filters { list-style: none;}
ul#filters li {display: inline-block; position: relative;}
ul#filters li > ul.dropM {list-style: none; position: absolute; top: 30px; left: -40px; padding: 15px; border: 1px solid #ccc; background: #fff; display: block; min-width: 200px; display: none; z-index: 201;}
ul#filters li > ul.dropM.open {display: block;}
ul#filters {display: inline-block;}
ul#filters li a.filterBtn {text-decoration: none; padding: 10px 20px; background: #ccc; color: black;}
JS
const filterMenuBtn = document.querySelectorAll('a.filterBtn');
const dropMenu = document.querySelectorAll('ul.dropM');
function openDropMenu(e){
filterMenuBtn.forEach(cliks => {
//console.log(cliks);
if(cliks === this) {
this.nextElementSibling.classList.toggle('open');
//console.log('i clicked this one');
}
});
}
filterMenuBtn.forEach(cliks => cliks.addEventListener('click', openDropMenu));
JSFiddle

Update your javascript to this
const filterMenuBtn = document.querySelectorAll('a.filterBtn');
const dropMenu = document.querySelectorAll('ul.dropM');
function openDropMenu(e) {
if (e.type == 'click'){
e.currentTarget.nextElementSibling.classList.toggle('open');
} else {
e.currentTarget.nextElementSibling.classList.remove('open');
}
}
filterMenuBtn.forEach(cliks => cliks.addEventListener('click', openDropMenu));
filterMenuBtn.forEach(cliks => cliks.addEventListener('blur', openDropMenu));

Open accordion on load with active class

I have an accordion on my website and I would like for the accordion to be open at the right level depending on where the active class is. I have made a JSFiddle.
JS:
$(document).ready(function ($) {
$('.servicesub').find('.servicesubitem').click(function () {
if ($(this).next().is(':visible')) {
//Collapse
$(this).next().slideToggle('fast');
$(this).removeClass('active');
// $("#footer-wrapper").animate({marginTop: "0px"}, 'fast');
} else {
//Expand
$(this).next().slideToggle('fast');
$(this).siblings().removeClass('active');
$(this).addClass('active');
//hide other panels
$(".servicesubli").not($(this).next()).slideUp('fast');
//$("#footer-wrapper").animate({marginTop: "200px"}, 'fast');
}
});
});
HTML:
<div class="col-xs-12 col-md-3 col-lg-3 servicesub" id="servicesub" >
<li class="servicesubitem active">
<span class="subitem">Web Design,
<br>
Multimedia & Email</span><span class="fa1 fa-globe"> </span>
</li>
<div class="servicesubli">
<ul>
<a href="domains.php">
<li>
Domain Registration
</li>
</a>
<a href="webdesign.php">
<li>
Web Design & Development
</li>
</a>
<a href="webhosting.php">
<li>
Web Hosting
</li>
</a>
<a href="email.php">
<li>
Managed Email Systems
</li>
</a>
</ul>
</div>
<li class="servicesubitem">
<span class="subitem">Vessel
<br>
Security</span><span class="fa1 fa-lock"> </span>
</li>
<div class="servicesubli">
<ul>
<a href="tracking.php">
<li>
Yacht Tracking
</li>
</a>
<a href="ssas.php">
<li>
SSAS
</li>
</a>
<a href="#">
<li>
SAT C
</li>
</a>
</ul>
</div>
</div>
CSS:
* Service Sub */
.servicesub { padding:10px; }
.servicesub ul { list-style-type: none; padding: 0px; color: #fff;}
.servicesub li{ font-size: 14px; height: 70px; padding: 17px 0px 10px 20px; margin-top: 10px; text-transform: uppercase; }
.servicesub li a {text-decoration: none;}
.servicesub li a:hover {color:#fff;}
.servicesub li { background-color: #017CEB; }
.servicesub li:hover { background-color: #015BAC; }
.servicesub li.active { background-color: #015BAC; }
.servicesub span:after { color:#fff; font-family: FontAwesome; display: inline-block; width: 1.2em; font-size: 40px; position: absolute; text-align: center; margin-top: -9px; }
#servicesub.stick { position: fixed; top: 80px; max-width: 293px; }
.subitem { color:#fff; height:58px; width: 215px; position: absolute; right: 10px; text-align: center; }
.servicesubitem { cursor: pointer; }
.servicesubli { cursor: pointer; display: none; }
.servicesubli.default { display: block; }
.servicesubli ul { width: 100%; font-size: 14px;}
.servicesubli li { padding: 8px; margin-top: 1px; text-transform: uppercase; height: 35px; text-align: center;}
.servicesubli a { text-decoration: none; color: #fff; }
.servicesub .getintouch { background-color: #00539f; padding: 10px; height: auto;}
.servicesub .getintouch:hover { background-color: #00539f; }
.servicesub .getintouch h3 { color: #fff; text-align: center; }
.servicesub .getintouch p { color:#fff; text-align: center; }
As you can see the accordion works to click on and the active class (which is set manually for this demo) is there I just want it so that the correct accordion part is toggled when the page is loaded. Thanks in advance.

To recycle your logic, You can just add your .active class to whichever element you wish, then search for .servicesubli.active on ready. Observe the following...
<div class="servicesubli active">
$(function() {
[...]
$('.servicesubli.active').slideToggle('fast');
});
JSFiddle Link - demo
Per comments, if you wish to target off servicesubitem.active, just modify to the following...
$('.servicesubitem.active').next('.servicesubli').addClass('active').slideToggle('fast');
JSFiddle Link - demo - .servicesubitem.active selector

Well you just need to trigger the click event once the page is loaded like below:
$('.servicesub').find('.active').trigger( "click" );
See the jsfiddle here: http://jsfiddle.net/beroza/a1mbgyqx/

css + html menu hitbox

I wrote some code using different internet sources. I ran into a problem -
every object that's in the bottom part of the menu cannot be interacted with.
The menu interferes with everything below where the dropdown falls.
<style>
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 23px;
}
#nav {
background-color:1a1a1a;
opacity: 0.9;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 0px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
.left-to-right {
text-align: left;
}
</style>
<html lang="he">
<body dir-"rtl"><div id="nav">
<div id="nav_wrapper">
<div>
<ul <ul dir="RTL">
<li> תרמילים
<ul class="left-to-right">
<!-- <li class="backpacks" id="firstlight-20l"> FirstLight 20L </li>
<li class="backpacks" id="firstlight-30l"> FirstLight 30L </li>
<li class="backpacks" id="firstlight-40l"> FirstLight 40L </li>-->
<li class="backpacks"> rotation180° Professional 38L Deluxe </li>
<li class="backpacks"> rotation180° Horizon 34L </li>
<li class="backpacks"> rotation180° Panorama 22L </li>
<!-- <li class="backpacks" id="rotation180-travel-away"> rotation180° Travel Away 22L </li>-->
<li class="backpacks" id="rotation180-trail"> rotation180° Trail 16L </li>
</ul>
</li>
<li> תיקי מצלמות ספורט
<ul class="left-to-right">
<li>GP 1 kit case
</li>
<li>GP 2 kit case
</li>
</ul>
</li>
<li> אביזרים
<ul class="left-to-right">
<li>r180º Panorama/Horizon Photo Insert
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

#nav_wrapper ul ul li{ text-align:left;}
you need to add this only: demo

You might be able to use vertical-align for the list elements & text-align for the links.

Just add a class to the <ul> tag of each dropdown and add text-align: left to it.
FIDDLE Here

HTML Center all content divs with unordered lists/lists in nav bar

this might be a noobish question but I tried many solutions found here and online and still cant figure out.
I have a main menu bar with each item as a li within a ul.
How can I make it displayed in the center of the browser of all times?
By the way, I need to keep the javascript that displays correspondant submenu when hovered a main menu item working.
Below is the html,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nothing</title>
<link rel="stylesheet" type="text/css" href="final.css">
<script language="javascript" type="text/javascript" src="final.js"></script>
</head>
<body>
<div id="header">
<div id="logo">
<div class="verti">
<img src="../Images/logo.png" width="642" height="68" border="0" />
</div>
</div>
<div id="menu">
<div class="verti">
<ul>
<li id="m1" class='menulist' onmouseover='mov(1);' >Main</li>
<li id="m2" class='menulist' onmouseover='mov(2);' >Intro</li>
<li id="m3" class='menulist' onmouseover='mov(3);' >Info</li>
<li id="m4" class='menulist' onmouseover='mov(4);' >Details</li>
<li id="m5" class='menulist' onmouseover='mov(5);' >Contact</li>
<li id="m6" class='menulist' onmouseover='mov(6);' >Service</li>
<li id="m7" class='menulist' onmouseover='mov(7);' >News</li>
<li id="m8" class='menulist' onmouseover='mov(8);' >About</li>
<li id="m9" class='menulist' onmouseover='mov(9);' >Contact</li>
</ul>
</div>
</div>
<div id="submenu">
<div class="verti">
<ul>
<li id= "s3_1" class='s3' onmouseover='mov(3);'>Real Info</li>
<li id= "s3_2" class='s3' onmouseover='mov(3);'>Fake Info</li>
<li id= "s3_3" class='s3' onmouseover='mov(3);'>Disinfo</li>
</ul>
<ul>
<li id= "s4_1" class='s4' onmouseover='mov(4);'>Poor details</li>
<li id= "s4_2" class='s4' onmouseover='mov(4);'>Rich details</li>
<li id= "s4_3" class='s4' onmouseover='mov(4);'>None-details</li>
</ul>
</div>
</div>
</div><!--header-->
</body>
</html>
Below is the CSS,
#charset "utf-8";
/* CSS Document */
li {
text-decoration: none;
}
.verti {
}
#logo {
margin: 0 0 0 0;
}
#image {
border-radius: 10px;
}
#menu {
background-color: #65EBEB;
height: 50px;
border-radius: 5px;
margin: 0 0 0 0;
}
#menu ul {
width: 990px;
border-radius: 5px;
text-align: center;
height: 50px;
margin-left: -35px;
}
#menu ul li {
display: inline-block;
line-height: 50px;
list-style-type: none;
width: 90px;
font-weight: 600;
}
.currenttab a {
color:red;
font-weight: 1200;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
.menulist a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menulist a:active {
background-color: yellow;
}
#submenu {
height: 50px;
background-color: #F1F1F1;
border-radius: 5px;
margin-top:0;
}
#submenu ul {
position: absolute;
margin-top: 0;
width: 960px;
border-radius: 5px;
padding: 5px;
text-align: center;
}
#submenu ul li {
line-height: 40px;
list-style-type: none;
padding-left: 30px;
display: none;
font-weight: bold;
}
#submenu a {
text-decoration: none;
color: green;
font-size: 14px;
font-weight:500;
}
#submenu a:hover {
color: red;
font-size: 16px;
font-weight: bold;
}
Below is the js used for display submenu,
function mov(object){
//reset submenu display to none
displaynone();
//set selected menu styles
ssms(object);
//display submenu for selected menu
displaysub(object);
}
function displaynone(){
var n;
for (n = 0; n < 10; n++) {
var s = document.getElementsByClassName("s"+n);
for (k = 0; k < s.length; k++) {
s[k].style.display ="none";
}
}
}
function menurestore(){
for(m = 1; m<10; m++){
var ml = document.getElementById("m"+m);
ml.className = "menulist";
}
}
function ssms(n){
//reset unselected menu styles
menurestore();
var y = document.getElementById("m"+n);
y.className = "currenttab";
}
function displaysub(object){
var x = document.getElementsByClassName("s"+object);
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display ="inline";
}
}
Thank you so much for the help.. Been struggling for days on this thing.

Try adding this class to your <ul> tag:
.center-menu {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
}
Flexbox is new CSS properties that are not fully suported in all browsers, but is supported in a good amount of them.
To display sub-menu on hover with jQuery:
<!doctype html>
<html lang="en">
<head>
<title>Hover Menu</title>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
text-align: center;
}
.hover-menu {
position: relative;
}
.hover-menu li {
padding: 15px;
background-color: silver;
color: black;
border: 1px solid black;
width: 100px;
}
.sub-menu {
position: absolute;
visibility: hidden;
top: 0px;
left: 140px;
}
.hover-menu li:nth-child(3) .sub-menu {
top: 50px;
left: 140px;
}
.hover-menu li:nth-child(4) .sub-menu {
top: 100px;
left: 140px;
}
</style>
</head>
<body>
<ul class="hover-menu">
<li><span>Navigation</span></li>
<li>
Home
<ul class="sub-menu">
<li>Link</li>
<li>Another Link</li>
<li>Yet Another</li>
</ul>
</li>
<li>
About
<ul class="sub-menu">
<li>Link</li>
<li>Another Link</li>
<li>Yet Another</li>
</ul>
</li>
<li>
Contact
<ul class="sub-menu">
<li>Link</li>
<li>Another Link</li>
<li>Yet Another</li>
</ul>
</li>
</ul>
<script src="vendors/jquery-1.11.3.min.js"></script>
<script>
$('ul.hover-menu li').hover(function() {
$('ul:first',this).css('visibility', 'visible');
}, function(){
$('ul:first',this).css('visibility', 'hidden');
});
</script>
</body>
</html>