Develop Reference

Scrolling div/section with indicators

I want to create a vertical scrolling div with an active indicators. However I'm having trouble with it event firing on the div targeted. I set it to window.addEventListener it works fine at full height of the window but if I set it to div.addEventListener it's not firing inside of the element at all. I'm Hoping someone has some pointer for this. Here's what I got so far.
section.scroller {
max-width: 900px;
margin: auto;
background: antiquewhite;
scroll-behavior: smooth;
position: relative;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
padding-right: 17px;
// padding: 0 17px;
box-sizing: content-box;
}
.sec {
min-height: 100vh;
// width: 100vw;
display: flex;
align-items: center;
justify-content: center;
scroll-behavior: smooth;
// width: 100%;
&:nth-child(odd) {
background: #ddd;
}
}
.lnbNavbar {
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 0;
border-radius: 15px;
transition: opacity .4s ease .2s;
opacity: 0;
position: relative;
float: right;
transition: .3s all;
ul {
list-style: none;
padding: 0;
margin: 0;
li {
width: 0px;
position: relative;
text-align: right;
.dot {
border: 2px solid#333;
width: 10px;
height: 10px;
display: inline-block;
border-radius: 50%;
transition: .2s ease;
span {
display: inline-block;
}
}
}
}
}
.lnbNavbar ul li a:active,
.lnbNavbar ul li a:hover {
border-color: rgb(124, 7, 7);
background-color: gray;
transform: scale(1.8);
}
.lnbNavbar ul li.active a,
.lnbNavbar ul li:hover a {
border-color: rgb(124, 7, 7);
background-color: gray;
transform: scale(1.8);
}
.outter {
width: 800px;
height: 500px;
margin: auto;
overflow: hidden;
}
<div class="outter" id="outter">
<section class="scroller" id="scroller">
<nav class="lnbNavbar">
<ul>
<li class="home active">
<a href="#home" class=" home dot">
<span></span>
</a>
</li>
<li class="about">
<a href="#about" class="about dot">
<span></span>
</a>
</li>
<li class="service">
<a href="#service" class="service dot">
<span></span>
</a>
</li>
<li class="project">
<a href="#project" class="project dot">
<span></span>
</a>
</li>
<li class="contact">
<a href="#contact" class="contact dot">
<span></span>
</a>
</li>
</ul>
</nav>
<section class="sec" id="about"><h4>about</h4></section>
<section class="sec" id="service"><h4>service</h4></section>
<section class="sec" id="project"><h4>project</h4></section>
<section class="sec" id="contact"><h4>contact</h4></section>
<section class="sec" id="home"><h4>home</h4></section>
</section>
<script>
const sections = document.querySelectorAll('section');
const navLi = document.querySelectorAll('.lnbNavbar ul li');
const div = document.getElementById("outter")[0];
div.addEventListener('scroll', ()=> {
let current = '';
sections.forEach( section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if(pageYOffset >= (sectionTop - sectionHeight / 4)){
current = section.getAttribute('id');
}
})
console.log(current);
navLi.forEach( li => {
li.classList.remove('active');
if(li.classList.contains(current)){
li.classList.add('active')
}
})
})
</script>
</div>

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

how can I make sub-menu appears using jquery?

I am desperately trying to make sub-menu appears under menu-item below when I hover a mouse.
I created color-change and underline when menu-item is hovered using css but have no idea how to make sub-menu appears under the menu-item. I have no knowledge related jquery so I googled some jquery effect but did not work either.
Is there other way to make it appears without using jquery?
<style>
.menu {
margin-left: 220px;
}
.menu-item-text {
display: inline-block;
margin-top: 18px;
color: black;
font-weight: 550;
}
.menu-item-text:hover {
content: '';
color: red;
}
.menu-item-text:hover:after {
content:'';
display: block;
border-bottom: 2px solid rgb(15, 1, 1);
margin-top: 19px;
}
.sub-menu1 {
background: yellowgreen;
position: absolute;
display: block;
}
.sub-menu li {
white-space: nowrap;
display: inline;
}
.sub-menu a:before {
content: '☆';
top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
content: '★';
}
.navigation .sub-menu {
display: none;
}
.menu-act .menu-item-text {
color: red;
}
.sub-menu1 li, .sub-menu1 a {
display: inline-block;
}
</style>
<body>
<nav class="navigation">
<ul class="menu">
<li class='menu-item' tabindex='0'>
<span class="menu-item-text menu-act">About HTML</span>
<ul class='sub-menu'>
<li>
HTML Introduction
</li>
<li>
Reference Introduction
</li>
<li>
Examples
</li>
</ul>
</li>
</ul>
</nav>
</body>

You don't need JQuery to display a submenu on hover. You can do it with CSS.
.menu-item:hover .sub-menu {display: block;}
If there is more than one submenu then use id or different class names for them. So you can display the corresponding submenu under each menu.
<style>
.menu {
margin-left: 220px;
}
.menu-item-text {
display: inline-block;
margin-top: 18px;
color: black;
font-weight: 550;
}
.menu-item-text:hover {
content: '';
color: red;
}
.menu-item-text:hover:after {
content:'';
display: block;
border-bottom: 2px solid rgb(15, 1, 1);
margin-top: 19px;
}
.sub-menu1 {
background: yellowgreen;
position: absolute;
display: block;
}
.sub-menu li {
white-space: nowrap;
display: inline;
}
.sub-menu a:before {
content: '☆';
top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
content: '★';
}
.menu-item:hover .sub-menu {display: block;}
.navigation .sub-menu {
display: none;
}
.menu-act .menu-item-text {
color: red;
}
.sub-menu1 li, .sub-menu1 a {
display: inline-block;
}
</style>
<body>
<nav class="navigation">
<ul class="menu">
<li class='menu-item' tabindex='0'>
<span class="menu-item-text menu-act">About HTML</span>
<ul class='sub-menu'>
<li>
HTML Introduction
</li>
<li>
Reference Introduction
</li>
<li>
Examples
</li>
</ul>
</li>
</ul>
</nav>
</body>
With JQuery you can simulate this as follows:
$(".menu-item").on("mouseover", function(){ //This will display the submenu on mouse hover.
$(".sub-menu").show();
});
$(".menu-item").on("mouseout", function(){ //This will hide the submenu when mouse leaves the menu item.
$(".sub-menu").hide();
});
.menu {
margin-left: 220px;
}
.menu-item-text {
display: inline-block;
margin-top: 18px;
color: black;
font-weight: 550;
}
.menu-item-text:hover {
content: '';
color: red;
}
.menu-item-text:hover:after {
content:'';
display: block;
border-bottom: 2px solid rgb(15, 1, 1);
margin-top: 19px;
}
.sub-menu1 {
background: yellowgreen;
position: absolute;
display: block;
}
.sub-menu li {
white-space: nowrap;
display: inline;
}
.sub-menu a:before {
content: '☆';
top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
content: '★';
}
.navigation .sub-menu {
display: none;
}
.menu-act .menu-item-text {
color: red;
}
.sub-menu1 li, .sub-menu1 a {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<nav class="navigation">
<ul class="menu">
<li class='menu-item' tabindex='0'>
<span class="menu-item-text menu-act">About HTML</span>
<ul class='sub-menu'>
<li>
HTML Introduction
</li>
<li>
Reference Introduction
</li>
<li>
Examples
</li>
</ul>
</li>
</ul>
</nav>
</body>
You can use mouseover and mouseout or mouseleave events of jQuery.

You can also do this with CSS but you mention you want in jquery that's why I make it with Jquery.
I think you want like this:-
$(document).ready(function(){
$('.menu-item-text').mouseover(function(){
$(this).next('.sub-menu').show();
});
$('.menu-item-text').mouseout(function(){
$(this).next('.sub-menu').hide();
});
});
.menu {
margin-left: 220px;
}
.menu-item-text {
display: inline-block;
margin-top: 18px;
color: black;
font-weight: 550;
}
.menu-item-text:hover {
content: '';
color: red;
}
.menu-item-text:hover:after {
content:'';
display: block;
border-bottom: 2px solid rgb(15, 1, 1);
margin-top: 19px;
}
.sub-menu1 {
background: yellowgreen;
position: absolute;
display: block;
}
.sub-menu li {
white-space: nowrap;
display: inline;
}
.sub-menu a:before {
content: '☆';
top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
content: '★';
}
.navigation .sub-menu {
display: none;
}
.menu-act .menu-item-text {
color: red;
}
.sub-menu1 li, .sub-menu1 a {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navigation">
<ul class="menu">
<li class='menu-item' tabindex='0'>
<span class="menu-item-text menu-act">About HTML</span>
<ul class='sub-menu'>
<li>
HTML Introduction
</li>
<li>
Reference Introduction
</li>
<li>
Examples
</li>
</ul>
</li>
</ul>
</nav>

Navigation menu drop down tabs in jquery

I have a requirement create navigation menu tabs, each tab has child tab like drop-down menu. Whenever I click on the each tab corresponding content should display (same for sub tab also). I am facing css issue how to display correctly the sub tabs related to menu and also need to display sub tab related content when i click on it.can anyone help me on this?
$(document).ready(function(){
$('ul#myNavUl li').on("click", (function(e) {
// Add selected class to clicked tab
$(this).addClass('selected').siblings().removeClass('selected');
// Determine selected li index in respect to parent ul
var tabIndex = $(this).index();
// Find article respective to selected tab
var article = $(this).closest('.content').find('.articles').children().eq(tabIndex);
// Add selected class to respective article
article.addClass('selected').siblings().removeClass('selected');
var parentH = $('ul#myNavUl li ul').parent().height();
$('ul#myNavUl li ul').css('top', parentH);
$('ul#myNavUl li ').hover(function(){
$('ul', this).show();
}, function(){
$('ul', this).hide();
});
}));
});
body {
background-color: #333;
font-family: "Open Sans Condensed";
margin: 0;
}
.content {
width: 100%;
margin: 0 auto;
padding: 12px;
}
.article {
display: none;
margin: 100px auto 0;
width: 1024px;
padding: 8px 12px;
border-radius: 5px;
background-color: #f9f9f9;
}
.article.selected {
display: block;
}
.article h2, .article p {
color: #2a2a2a;
}
ul#myNavUl {
list-style: none;
text-align: center;
color: #fff;
}
ul#myNavUl li {
position: relative;
width: 15%;
margin: 0 4px;
padding: 15px;
float: left;
background-color: #0077bb;
}
ul#myNavUl li:hover {
background-color: #00aaee;
}
ul#myNavUl li.selected {
background-color: #00aaee;
}
ul#myNavUl li.selected::after {
position: absolute;
display: block;
width: 0;
bottom: -15px;
left: calc(50% - 15px);
content: "";
border-width: 15px 15px 0;
border-style: solid;
border-color: #00aaee transparent;
}
ul#myNavUl li a{
text-decoration: none;
color: white;
}
ul#myNavUl li ul{
position:absolute;
left:0;
display:none;
}
<div class="content">
<div class="tabs">
<ul id="myNavUl">
<li class="selected">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4
<ul><!-- added drop-down items -->
<li><a href="#son-of-tab3" >drop-down 1</a></li>
<li><a href="#son-of-tab3" >drop-down 2</a></li>
<li><a href="#son-of-tab3" >drop-down 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="articles">
<div class="article selected">
<h2>Article 1</h2>
</div>
<div class="article">
<h2>Article 2</h2>
</div>
<div class="article">
<h2>Article 3</h2>
</div>
<div class="article">
<h2>Article 4</h2>
</div>
<div class="article">
<h2>Article 5</h2>
</div>
</div>
</div>

I build for you a container with tabs and screens,
let me know if that what you looking for.
html:
<div id="tp--nav-bar">
<ul id="nav-bar--list">
<li class="controler">
<a>home</a>
<ul class="screen">
<li><a>page</a></li>
<li><a>page</a></li>
</ul>
</li>
<li class="controler">
<a>about</a>
<ul class="screen">
<li><a>page</a></li>
<li><a>page</a></li>
</ul>
</li>
<li class="controler">
<a>gallery</a>
<ul class="screen">
<li><a>page</a></li>
<li><a>page</a></li>
</ul>
</li>
<li class="controler">
<a>contact</a>
<ul class="screen">
<li><a>page</a></li>
<li><a>page</a></li>
</ul>
</li>
</ul>
</div>
scss:
#mixin transition($ease, $s) {
-webkit-transition: $ease $s;
-moz-transition: $ease $s;
-ms-transition: $ease $s;
-o-transition: $ease $s;
transition: $ease $s;
}
#mixin translate($x, $y) {
-webkit-transform: translate($x,$y);
-moz-transform: translate($x,$y);
-ms-transform: translate($x,$y);
-o-transform: translate($x,$y);
transform: translate($x,$y);
}
#nav-bar--list {
font-family: 'Raleway', sans-serif;
> li {
cursor: pointer;
position: relative;
display: inline-block;
float: left;
width: 25%;
height: 50px;
line-height: 50px;
text-align: center;
background: #00aaee;
color: #fff;
overflow: hidden;
a {
display: block;
width: 100%;
height: 100%;
}
}
> li.active {
background: #007eb1;
overflow: visible;
}
> li:hover {
background: #007eb1;
}
}
.screen {
position: absolute;
top: 100%;
left: 0;
width: 100%;
line-height: 40px;
text-align: center;
background: #00aaee;
color: #fff;
z-index: -1;
opacity: 0;
#include translate(0px, 50px);
#include transition(cubic-bezier(0.4, 0.1, 0, 1.6), 0.45s);
li:hover {
background: #007eb1;
a {
color: #fff;
text-decortion: none;
}
}
}
.screen.active {
z-index: 1;
opacity: 1;
#include translate(0px, 0px);
}
jQuery:
$(document).ready(function() {
tabPanel('#tp--nav-bar')
});
function tabPanel(element) {
var container = $(element),
controlers = container.find('.controler'),
screens = container.find('.screen'),
map = {};
for (i = 0; i < controlers.length; i++) {
var control = controlers[i],
screen = screens[i],
controler = 'controler-' + i,
screener = 'screener-' + i;
$(control).attr('id', controler);
$(screen).attr('id', screener);
map[controler] = screener;
};
controlers.click(function() {
var controlerId = $(this).attr('id'),
controlerClass = $(this).attr('class'),
controlerClass = controlerClass.indexOf('active');
if (controlerClass == -1) {
controlers.removeClass('active');
screens.removeClass('active');
$('#' + map[controlerId]).addClass('active');
$('#' + controlerId).addClass('active');
}
});
}
My Fiddle

I checked your code and looked in the console of the browser; it has one jQuery error like $ is not defined. I think you forget to add jQuery library; that's the way this error occurs. Add jQuery file or you can use jQuery cdn also like this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Add this line add before the </body> tag and then check if it works.

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>