We Keep Coding

On mobile I want my navbar to close when I click an ID

I have a problem with my navbar. I want to select an #id (page) on my mobile device, reach that side of the page and then close the .nav-wrapper which holds all the ul li's, the one that was opened to view all the pages (id's).
I've tried something but it didn't work. Hope you understood my question and also I hope that you can help me.
$(document).ready(function(){
$(window).scroll(function(){
if($(document).scrollTop()>130){
$(".nav-btn").addClass("fundal")
}
else{
$(".nav-btn").removeClass("fundal")
}
});
});
window.addEventListener('load', ()=> {
const preload = document.querySelector('.preload');
preload.classList.add('preload-finish');
});
$("ul").click(function () {
$(".nav-wrapper").toggleClass(".nav-btn");
})
/* NAVBAR */
.navigatie{
background-color:transparent;
width:100%;
position: absolute;;
z-index: 99;
margin:0px;
padding:0px;
}
.logo {
float: left;
padding: 8px;
margin-left: 40px;
margin-top: 8px;
}
.navbar-brand{
color:white !important;
}
.navbar-brand img{
width: auto;
height: 100px;
margin:-32px 0px -25px 0px;
}
nav ul {
float: right;
list-style-type: none;
padding-top:5px;
margin-right:20px;
}
nav ul li {
float: left;
}
nav ul li:not(:first-child) {
margin-left: 48px;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
letter-spacing: 1.1px;
font-weight: 700;
}
nav ul li a:hover{
color:#fff;
text-decoration: underline;
}
/* FUNDAL JS */
.fundal{
background:#e04f45 !important;
box-shadow:1px 2px 4px 0px #00000075 !important;
}
.fundal .nav-btn {
background-color:#e04f45;
border-radius: 50%;
box-shadow:1px 2px 4px 0px #00000075;
}
.fundal .nav-btn i{
background: #fff;
border-radius: 2px;
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
background-color: #e04f45;
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
display:block
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
/* MEDIA SCREEN NAVBAR PTR TLF */
#media only screen and (max-width: 991px){
.navigatie{
background-color:transparent;
width:100%;
position: absolute;
z-index: 99;
margin:0px;
padding:0px;
}
.navbar-brand img{
height:100px;
margin:-20px 0px 0px 0px;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
display:none;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: center;
padding-top:10px;
margin-bottom: 10px;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 30px;
top: 28px;
display: block;
width: 47px;
height: 46px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigatie">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="nav-wrapper">
<ul>
<li>Acasă</li>
<li>Despre</li>
<li>Studii</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>

You could do that by changing a small thing in your JavaScript.
Now the menu is showing when the checkbox is checked, you need to make sure that the checkbox gets unchecked when clicking a link. I've updated the JS in your 'click' function
Tip: try to avoid doing one thing with Vannila JS and the other thing with jQuery
$(document).ready(function () {
$(window).scroll(function () {
console.log($(document).scrollTop());
if ($(document).scrollTop() > 130) {
$(".nav-btn").addClass("fundal");
console.log("add class", $(".nav-btn").hasClass("fundal"));
} else {
$(".nav-btn").removeClass("fundal");
console.log("remove class");
}
});
});
window.addEventListener("load", () => {
const preload = document.querySelector(".preload");
preload.classList.add("preload-finish");
});
// Updated the selector
$(".nav-wrapper li a").click(function () {
$(".nav-wrapper").toggleClass(".nav-btn");
// Uncheck your checkbox
$("#nav").prop("checked", false)
});
.page {
background: #f00;
height: 500px;
margin-bottom: 10px;
}
/* NAVBAR */
.navigatie {
background-color: transparent;
width: 100%;
position: absolute;
z-index: 99;
margin: 0px;
padding: 0px;
}
.logo {
float: left;
padding: 8px;
margin-left: 40px;
margin-top: 8px;
}
.navbar-brand {
color: white !important;
}
.navbar-brand img {
width: auto;
height: 100px;
margin: -32px 0px -25px 0px;
}
nav ul {
float: right;
list-style-type: none;
padding-top: 5px;
margin-right: 20px;
}
nav ul li {
float: left;
}
nav ul li:not(:first-child) {
margin-left: 48px;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
letter-spacing: 1.1px;
font-weight: 700;
}
nav ul li a:hover {
color: #fff;
text-decoration: underline;
}
/* FUNDAL JS */
.fundal {
background: #e04f45 !important;
box-shadow: 1px 2px 4px 0px #00000075 !important;
}
.fundal.nav-btn {
background-color: #e04f45;
border-radius: 50%;
box-shadow: 1px 2px 4px 0px #00000075;
}
.fundal.nav-btn i {
background: #fff;
border-radius: 2px;
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
background-color: #e04f45;
}
#nav:checked + .nav-btn i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
display: block;
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
/* MEDIA SCREEN NAVBAR PTR TLF */
#media only screen and (max-width: 991px) {
.navigatie {
background-color: transparent;
width: 100%;
position: absolute;
z-index: 99;
margin: 0px;
padding: 0px;
}
.navbar-brand img {
height: 100px;
margin: -20px 0px 0px 0px;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
display: none;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 30px;
top: 28px;
display: block;
width: 47px;
height: 46px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="preload"></div>
<div class="navigatie">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="nav-wrapper">
<ul>
<li>Acasă</li>
<li>Despre</li>
<li>Studii</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div class="page" id="home"></div>
<div class="page" id="despre"></div>
<div class="page" id="studii"></div>
<div class="page" id="abilitati"></div>
<div class="page" id="contact"></div>

JS problem with eventListener on IE11 - slide navigation not working

i'm very new on the javascript field and i have a big problem.
I worked on it the last 7 days and i can't find a solution.
I hope that anyone could tell me the code to solve this problem.
The following snippet show's my navigation. It work's fine on chrome, firefox but not on the IE11 - and it must worked on it.
It don't opened on IE11.
I tried the attachEvent function, but i didn't find the right code.
I'm very thankful for every help.
It would be a pleasure if anybody could tell me the little code part.
Thank you!!
const toggleButton = document.querySelector('.toggle-menu');
const navBar = document.querySelector('.nav-bar');
toggleButton.addEventListener('click', () => {
navBar.classList.toggle('toggle');
});
.nav-bar {
position: fixed;
z-index: 1;
background-color: red;
top: 0;
left: -100%;
height: 100%;
width: auto;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s ease-out;
padding: 2%;
}
.toggle {
left: 0;
box-shadow: 1px 0 15px 2px rgba(0, 0, 0, 0.4);
}
.toggle-menu {
background-color: white;
position: fixed;
top: 1rem;
left: 1rem;
width: 3.5rem;
height: 3rem;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 0.2rem 0.5rem;
border-radius: 0.5rem;
overflow: hidden;
background-clip: padding-box;
border: 3px solid black;
cursor: pointer;
}
.line {
width: 100%;
height: 4px;
border-radius:5px;
background-color: #000;
transition: 0.2s ease-out;
}
.toggle .line1 {
background-color: #e30513;
transform: scale(0.9) rotateZ(-45deg) translate(-8px, 8px);
}
.toggle .line2 {
display: none;
}
.toggle .line3 {
background-color: #e30513;
transform: scale(0.9) rotateZ(45deg) translate(-7px, -8px);
}
.toggle .toggle-menu {
background-color: white;
border: 0;
}
.nav-list {
list-style: none;
padding: 0;
line-height: 0.5;
}
.nav-list-item {
text-align: left;
padding: 1rem 0;
}
.nav-list-item a:hover{
color: white;
}
.nav-link {
color: #fff;
font-size: 1.3rem;
text-decoration: none;
position: relative;
padding-bottom: 0.4rem;
}
.nav-list-item a:hover{
color: white;
}
.nav-link::before {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #fff;
transform: scaleX(0);
transition: 0.4s ease-in-out;
transform-origin: left;
}
.nav-link:hover::before {
transform: scaleX(1);
}
<div class="navigation">
<nav class="nav-bar">
<div class="toggle-menu">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
<ul class="nav-list">
<li class="nav-list-item">Link 1</li>
<li class="nav-list-item">Link 2</li>
</ul>
</nav>
</div>

Try to replace your arrow function with a regular function as IE11 doesn't support arrow functions.
const toggleButton = document.querySelector('.toggle-menu');
const navBar = document.querySelector('.nav-bar');
toggleButton.addEventListener('click', function () {
navBar.classList.toggle('toggle');
});

I agree with the suggestion provided by Acidic9 regarding the arrow functions.
Arrow functions not supported in the IE browser and your JS code uses the arrow functions.
While running the code in the IE browser it will show the syntax error.
To fix the issue you need to remove the arrow function from your JS code.
Below is your problematic code:
toggleButton.addEventListener('click', () => {
navBar.classList.toggle('toggle');
});
It needs to replace with the code below will fix the issue.
toggleButton.addEventListener('click', function () {
navBar.classList.toggle('toggle');
});
Here is the full modified code:
var toggleButton = document.querySelector('.toggle-menu');
var navBar = document.querySelector('.nav-bar');
toggleButton.addEventListener('click', function () {
navBar.classList.toggle('toggle');
});
.nav-bar {
position: fixed;
z-index: 1;
background-color: red;
top: 0;
left: -100%;
height: 100%;
width: auto;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s ease-out;
padding: 2%;
}
.toggle {
left: 0;
box-shadow: 1px 0 15px 2px rgba(0, 0, 0, 0.4);
}
.toggle-menu {
background-color: white;
position: fixed;
top: 1rem;
left: 1rem;
width: 3.5rem;
height: 3rem;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 0.2rem 0.5rem;
border-radius: 0.5rem;
overflow: hidden;
background-clip: padding-box;
border: 3px solid black;
cursor: pointer;
}
.line {
width: 100%;
height: 4px;
border-radius:5px;
background-color: #000;
transition: 0.2s ease-out;
}
.toggle .line1 {
background-color: #e30513;
transform: scale(0.9) rotateZ(-45deg) translate(-8px, 8px);
}
.toggle .line2 {
display: none;
}
.toggle .line3 {
background-color: #e30513;
transform: scale(0.9) rotateZ(45deg) translate(-7px, -8px);
}
.toggle .toggle-menu {
background-color: white;
border: 0;
}
.nav-list {
list-style: none;
padding: 0;
line-height: 0.5;
}
.nav-list-item {
text-align: left;
padding: 1rem 0;
}
.nav-list-item a:hover{
color: white;
}
.nav-link {
color: #fff;
font-size: 1.3rem;
text-decoration: none;
position: relative;
padding-bottom: 0.4rem;
}
.nav-list-item a:hover{
color: white;
}
.nav-link::before {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #fff;
transform: scaleX(0);
transition: 0.4s ease-in-out;
transform-origin: left;
}
.nav-link:hover::before {
transform: scaleX(1);
}
<div class="navigation">
<nav class="nav-bar">
<div class="toggle-menu">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
<ul class="nav-list">
<li class="nav-list-item">Link 1</li>
<li class="nav-list-item">Link 2</li>
</ul>
</nav>
</div>
Output in the IE 11 browser:

How to show only Parent and Child element? Javascript

I wish that when I clicked on parent it would show me his child element.
Since there is a multinesting,
When I select "List sub 2" I want "List 1" to disappear.
When I click again on "List 1", I want to see "List 1" and List 2 sub menu.
When click on "List sub2" to show "List 3 sub menu" and "List 1" to dissapear.
Another thing, the dropdown arrows should be if the list is open view arrows to the left and if the display is not opened right.
High priority is how to show property parent and child links.
Codepen code:
https://codepen.io/anon/pen/RXKBeq
HTML:
<div class="dropdown">
<button class="dropbtn dropbtn-three">
DropDown Parent
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<ul>
<li class="item-has-children">
List 1 <span class="rightt"> </span>
<ul class="sub-menu">
<li>List 2 sub menu <span class="rightt"> </span>
<ul class="sub-menu">
<li>List 3 sub menu </li>
<div class="hr2"></div>
<li>List 3 sub menu </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
CSS (sass)
$facebookBlue: #153161;
$strongRed: #9a0000;
$strongYellow: #ee8f01;
$white: #ffffff;
* {
box-sizing: border-box;
}
.dropdown {
position: relative;
display: inline-block;
.dropbtn {
background-color: $facebookBlue;
color: $white;
font-size: 17px;
font-weight: 600;
border: none;
cursor: pointer;
height: 55px;
background: #153161;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 12px 50px;
position: relative;
width: 360px;
text-align: left;
i {
margin-left: 30px;
color: #8391ab;
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%);
}
.arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #8191aa;
margin: 100%;
padding-top: 4px;
z-index: 999;
}
}
.dropbtn-two {
background: $strongRed;
}
.dropbtn-three {
background: $strongYellow;
}
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
width: 330px;
z-index: 999;
a {
color: black;
padding: 12px 25px;
text-decoration: none;
display: flex;
justify-content: flex-start;
width: 100%;
&:hover {
background-color: #F8F8F8
}
}
.rightt {
display: inline-block;
cursor: pointer;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
&:after {
content: '';
display: inline-block;
width: 9px;
height: 9px;
border-top: 0.2em solid #ababab;
border-right: 0.2em solid #ababab;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
.left {
display: inline-block;
cursor: pointer;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
&:after {
content: '';
display: inline-block;
width: 29px;
height: 29px;
border-top: 0.2em solid #ababab;
border-right: 0.2em solid #ababab;
transform: rotate(45deg);
}
}
.item-has-children {
a {
position: relative;
}
}
}
.dropdown:hover .dropdown-content {
display: block;
background: white;
opacity: 0.95;
width: 100%;
}
.hr2 {
height: 1px;
background: #ccc;
border-bottom: 1px solid #fff;
border-top: 1px solid #ccc;
}
.sub-menu {
display: none;
}
.sub-menu.selected {
display: flex;
flex-direction: column;
transition: transform 0.6s;
}
ul {
list-style: none;
padding: 0 0px;
width: 100%;
height: 100%;
}
.rightt.selected {
left: 40px;
top: 25%;
right: auto;
transform: translateY(0);
transform: rotate(180deg);
}
.padd-left {
padding-left: 0px;
}
.padd-left.selected {
padding-left: 70px;
}
JavaScript:
const links = document.querySelectorAll(".item-has-children");
const padd_left = document.querySelectorAll(".padd-left");
links.forEach((link) => {
link.addEventListener('click', (e) => {
const index = Array.from(links).indexOf(link)
if (e.target.nextElementSibling.classList.contains('selected')) {
e.target.nextElementSibling.classList.remove('selected')
e.target.querySelector('.rightt').classList.remove('selected');
Array.from(padd_left)[index].classList.remove('selected')
} else {
e.target.nextElementSibling.classList.add('selected')
e.target.querySelector('.rightt').classList.add('selected');
Array.from(padd_left)[index].classList.add('selected')
}
})
})

There is something in earlier versions of bootstrap just not in newest.
also check this out. Some dude already done it but in b4.

Here's a simple solution but with jQuery. Please see the forked CodePen: https://codepen.io/lakialex/pen/eqvEBR
const links = $('.item-has-children a');
links.each(function() {
$(this).on('click', function() {
if ($(this).hasClass('selected')) {
$(this).parent().parent().prev().show();
$(this).next('ul').hide();
$(this).removeClass('selected');
} else {
$(this).parent().parent().prev().hide();
$(this).next('ul').show();
$(this).addClass('selected');
}
});
});
I've changed the Sass a bit.
For example there's no need for .padd-left class because you can style the .selected class for left padding and arrow change.
$facebookBlue: #153161;
$strongRed: #9a0000;
$strongYellow: #000;
$white: #ffffff;
* {
box-sizing: border-box;
}
body {
display: flex;
padding-top: 40px;
}
.dropdown {
position: relative;
display: inline-block;
margin: 0 auto;
.dropbtn {
background-color: $facebookBlue;
color: $white;
font-size: 17px;
font-weight: 600;
border: none;
cursor: pointer;
height: 55px;
background: #153161;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 12px 50px;
position: relative;
width: 360px;
text-align: left;
i {
margin-left: 30px;
color: #8391ab;
// opacity: 0.2;
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%);
}
.arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #8191aa;
margin: 100%;
padding-top: 4px;
z-index: 999;
}
}
.dropbtn-two {
background: $strongRed;
}
.dropbtn-three {
background: $strongYellow;
}
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
width: 330px;
z-index: 999;
a {
color: black;
padding: 12px 25px;
text-decoration: none;
display: flex;
justify-content: flex-start;
width: 100%;
&:hover {
background-color: #F8F8F8
}
.rightt {
display: inline-block;
// width: 9px;
// height: 9px;
cursor: pointer;
// padding-left: 180px;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
&:after {
content: '';
display: inline-block;
width: 9px;
height: 9px;
border-top: 0.2em solid #ababab;
border-right: 0.2em solid #ababab;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
&.selected {
padding-left: 70px;
.rightt {
left: 40px;
top: 25%;
right: auto;
transform: translateY(0);
transform: rotate(180deg);
}
}
}
.left {
display: inline-block;
cursor: pointer;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
&:after {
content: '';
display: inline-block;
width: 29px;
height: 29px;
border-top: 0.2em solid #ababab;
border-right: 0.2em solid #ababab;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
.item-has-children {
a {
position: relative;
}
}
}
.dropdown:hover .dropdown-content {
display: block;
background: white;
opacity: 0.95;
width: 100%;
}
.hr2 {
height: 1px;
background: #ccc;
border-bottom: 1px solid #fff;
border-top: 1px solid #ccc;
}
.sub-menu {
display: none;
}
.sub-menu.selected {
display: flex;
flex-direction: column;
transition: transform 0.6s;
}
ul {
list-style: none;
padding: 0 0px;
width: 100%;
height: 100%;
}
Keep in mind that I've added jQuery in CodePen settings.
Cheers!
Update
The CodePen is updated with vanilla JS that does exactly like previous jQuery code.
const links = document.querySelectorAll('li a');
links.forEach( function(el) {
const parent = el.parentNode.parentNode.previousElementSibling;
el.addEventListener('click', function() {
if (el.classList.contains('selected')) {
if (parent !== null) {
parent.style.display = 'block';
}
el.nextElementSibling.style.display = 'none';
el.classList.remove('selected');
} else {
if (el.nextElementSibling !== null) {
el.nextElementSibling.style.display = 'block';
el.classList.add('selected');
}
if (parent !== null && el.nextElementSibling !== null) {
parent.style.display = 'none';
}
}
}, false);
});
Cheers!

How to show only First Level parent and children in dropdown? Javascript

How to show only first level parent from drop-down? For the mobile menu, I use this https://www.jqueryscript.net/demo/Sticky-Header-Navigation-Plugin-jQuery-mhead/ like a plugin and this logic works perfectly. I need the same menu but for desktop. I need to do this in custom js, Html, CSS or maybe jquery. I will provide you how I try to do but not working properly. How should will work.. When select "1st Level" I need in drop-down only "1st Level" and "2nd Level" sub menu. I don't need "1st Level" from another list. When click on "1st Level" only show "1st Level" and 2nd Level". When click on 2nd Level only show 2nd Level on top and bellow "3rd Level"
Example how to work fine is on click on 1st Level Another
const links = document.querySelectorAll('li a');
links.forEach( function(el) {
const parent = el.parentNode.parentNode.previousElementSibling;
el.addEventListener('click', function() {
if (el.classList.contains('selected')) {
if (parent !== null) {
parent.style.display = 'block';
}
el.nextElementSibling.style.display = 'none';
el.classList.remove('selected');
} else {
if (el.nextElementSibling !== null) {
console.log(el.nextElementSibling);
el.nextElementSibling.style.display = 'block';
el.classList.add('selected');
}
if (parent !== null && el.nextElementSibling !== null) {
parent.style.display = 'none';
}
}
}, false);
});
* {
box-sizing: border-box;
}
body {
display: flex;
padding-top: 40px;
}
.dropdown {
position: relative;
display: inline-block;
margin: 0 auto;
}
.dropdown .dropbtn {
color: #ffffff;
font-size: 17px;
font-weight: 600;
border: none;
cursor: pointer;
height: 55px;
background-color: #000;
padding: 12px 50px;
position: relative;
width: 360px;
text-align: left;
}
.dropdown .dropbtn i {
margin-left: 30px;
color: #eee;
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%);
}
.dropdown .dropbtn .arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #8191aa;
margin: 100%;
padding-top: 4px;
z-index: 999;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
width: 330px;
z-index: 999;
}
.dropdown-content a {
color: black;
padding: 12px 25px;
text-decoration: none;
display: flex;
justify-content: flex-start;
width: 100%;
}
.dropdown-content a:hover {
background-color: #F8F8F8;
}
.dropdown-content a span {
display: inline-block;
cursor: pointer;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
}
.dropdown-content a span:after {
content: '';
display: inline-block;
width: 9px;
height: 9px;
border-top: 0.2em solid #ababab;
border-right: 0.2em solid #ababab;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.dropdown-content a.selected {
padding-left: 70px;
}
.dropdown-content a.selected span {
left: 40px;
top: 25%;
right: auto;
transform: translateY(0);
transform: rotate(180deg);
}
.dropdown-content .left {
display: inline-block;
cursor: pointer;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
}
.dropdown-content .left:after {
content: '';
display: inline-block;
width: 29px;
height: 29px;
border-top: 0.2em solid #ababab;
border-right: 0.2em solid #ababab;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.dropdown-content .item-has-children a {
position: relative;
}
.dropdown:hover .dropdown-content {
display: block;
background: white;
opacity: 0.95;
width: 100%;
}
.hr2 {
height: 1px;
background: #ccc;
border-bottom: 1px solid #fff;
border-top: 1px solid #ccc;
}
.sub-menu {
display: none;
}
.sub-menu.selected {
display: flex;
flex-direction: column;
transition: transform 0.6s;
}
ul {
list-style: none;
padding: 0 0px;
width: 100%;
height: 100%;
}
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown<i class="fa fa-angle-down"></i></button>
<div class="dropdown-content">
<ul>
<li class="item-has-children">
1st Level<span></span>
<ul class="sub-menu">
<li>
2nd Level <span></span>
<ul class="sub-menu">
<li>3rd Level</li>
<li>3rd Level </li>
</ul>
</li>
<li>
2nd Level another<span></span>
<ul class="sub-menu">
<li>3rd Level</li>
<li>3rd Level </li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li class="item-has-children">
1st Level<span></span>
<ul class="sub-menu">
<li>
2nd Level another<span></span>
<ul class="sub-menu">
<li>3rd Level</li>
<li>3rd Level </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>

target item(s) before hovered item (netflix-like hovering effect)

I am building a netflix-like slider in which a hovered slider-item pushes the other slider-items aside (depending on their location).
(see example code)
I can't find a solution to the following situation:
when I hover item 3, all other items are pushed aside to the left and right precisely as I want.
when item 2 is hovered, I want item 1 (or any item left of .item-left) to not move(stay in position). all others go as planned.
when item 4 is hovered, I want item 3/2/1 to keep the same distance from 4 as when not hovered. item 5 behaves correctly.
Hovered Items need to stay within the lightblue area (show-peek).
how can I make this work? Any help is welcome.
Thank you!
var slider = document.getElementById('sli');
var prev = document.getElementById('prev');
prev.addEventListener('click', prevC, false);
var next = document.getElementById('next');
next.addEventListener('click', nextC, false);
function prevC() {
alert('-1')
}
function nextC() {
alert('+1');
}
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900);
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
background-color: white/* rgba(20, 23, 26, .1) */
;
}
.page-head {
display: block;
top: 0;
left: 0;
width: 100%;
height: auto;
}
.page-head h1 {
font-size: 2em;
color: red;
text-align: center;
text-transform: uppercase;
padding: 20px;
}
/* general stuff */
.row {
display: block;
width: 400px;
margin: 0 auto;
/* overflow-x:hidden; */
}
.row-header {}
.row-header h2 {
font-size: 1.4em;
font-weight: 500;
padding: 8px 0;
margin-left: 45px;
}
.row-container {
position: relative;
}
.slider {
width: 100%;
padding: 0 41px 0 42px;
margin-top: 45px;
}
.slider .handle {
position: absolute;
top: 0;
bottom: 0;
z-index: 20;
width: 44px;
height: 69px;
text-align: center;
justify-content: center;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
color: #fff;
background: rgba(20, 20, 20, .3);
z-index: .9;
cursor: pointer;
line-height: 69px;
}
.handle-prev {
left: 0;
}
.handle-next {
right: 0;
}
.show-peek {
display: inline-block;
width: 316px;
height: 69px;
background: lightblue;
overflow-x: visible;
vertical-align: middle;
border: 1px dotted grey;
}
.slider-content {
display: block;
margin-top: 34px;
list-style: none;
white-space: nowrap;
transform: translateY(-50%) translateX(-100px);
text-align: center;
}
.slider-content:hover .slider-item {
opacity: 1;
transform: translateX(-49px);
transition-delay: .85s;
}
.slider-content:hover .slider-item:hover {
opacity: 1;
}
.slider-item {
position: relative;
vertical-align: middle;
display: inline-block;
list-style: none;
width: 100px;
height: 69px;
/* background-color: black; */
transition-duration: .3s;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(205, 20, 20, .3);
}
.slider-content li .bg-img {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center top;
}
.slider-content li:hover {
transition-delay: 0.1s;
width: 200px;
height: 130px;
}
.slider-content .left-item:hover {
transform: translateX(0);
z-index: 999;
}
.slider-content .left-item:hover~.slider-item {
transform: translate3d(0px, 0, 0);
}
.slider-content .right-item:hover {
margin-left: -50px;
z-index: 999;
}
.slider-content li:hover a .content {
transform: translateY(0) translateX(-50%);
transition-delay: 0.75s;
opacity: 1;
}
.slider-content li a {
color: white;
text-decoration: none;
cursor: pointer;
width: 100%;
height: 100%;
display: block;
position: relative;
z-index: 2;
}
.slider-content li a .content {
background: linear-gradient(transparent, rgba(0, 0, 0, .75));
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateY(100%) translateX(-50%);
transition-duration: .75s;
transition-delay: .4s;
opacity: 0;
padding: 40px 10px 10px 10px;
width: 400px;
}
.slider-content li a .content h2 {
font-weight: 300;
color: white;
font-size: 24px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<div class="row">
<div class="row-header">
<h2></h2>
</div>
<div class="row-container">
<div class="slider">
<span id="prev" class="handle handle-prev"><</span>
<div class="show-peek">
<ul class="slider-content">
<li class="slider-item">1</li>
<li class="slider-item left-item">2</li>
<li class="slider-item">3
</li>
<li class="slider-item right-item">4</li>
<li class="slider-item">5</li>
</ul>
</div>
<!-- ends show-peek -->
<span id="next" class="handle handle-next">></span>
</div>
<!-- ends slider -->
</div>
<!-- ends row-container -->
</div>
<!-- ends row -->

I did say that there was not really a CSS only solution but it seems you can be a bit creative..
You can take advantage of the -webkit-transform: scale CSS attribute.
Take your ul's and li's like so :
<ul class="slider-content">
<li id="1" class="slider-item">1</li>
<li id="2" class="slider-item">2</li>
<li id="3" class="slider-item">3</li>
<li id="4" class="slider-item">4</li>
</ul>
We can add some CSS to itterate over their order and modify their hover
ul{
list-style:none;
}
ul:hover li {
-webkit-transform: translateX(-25%);
transform: translateX(-25%);
}
ul:hover li:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
transition-duration: 0.1818181818s;
}
ul:hover li:hover ~ li {
-webkit-transform: translateX(25%);
transform: translateX(25%);
}
.slider-item {
position: relative;
vertical-align: middle;
display: inline-block;
list-style: none;
width: 100px;
height: 69px;
/* background-color: black; */
transition-duration: .3s;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(205, 20, 20, .3);
}
.slider-content {
display: block;
margin-top: 34px;
list-style: none;
white-space: nowrap;
transform: translateY(-50%) translateX(-100px);
text-align: center;
}
<ul class="slider-content">
<li id="1" class="slider-item">1</li>
<li id="2" class="slider-item">2</li>
<li id="3" class="slider-item">3</li>
<li id="4" class="slider-item">4</li>
</ul>
This works by using the animations in CSS and some clever use of the translate css also.