We Keep Coding

Javascript eventListener only working in some areas of the element

So i was building a burger menu responsive navbar. I finished up most of the working but i got stuck at one point. The problem is i have applied the javascript onClick event listener on the div .burger so that it changes the opacity of the .nav-container to 1. Up until to this point this works fine. The problem is this click event only works in some areas on the .burger. Like if clicked on of the lines in it or somewhere to the right. I can't seem to find the problem. Can someone help me with this? Thanks in advance.
Here is my code
function showNav() {
var nav = document.getElementById("nav");
nav.classList.add("show-nav");
}
* {
margin: 0px;
padding: 0;
box-sizing: border;
}
.container {
display: flex;
margin-top: 2%;
}
header {
position: relative;
z-index: 1;
}
.line1,
.line2,
.line3 {
width: 40px;
height: 8px;
background-color: black;
margin-top: 3px;
}
.nav-heading {
flex: 4;
margin-left: 5%;
}
.burger {
flex: 1;
margin-left: 40%;
background-color: red;
padding: 0;
width: auto;
}
.nav-container {
position: absolute;
width: 100%;
opacity: 0;
transition: .2s ease-in-out;
transform: translateY(-20%);
transform-origin: left;
ul {
display: flex;
flex-direction: column;
background-color: blue;
width: 100%;
align-items: center;
list-style-type: none;
li {
flex: 1;
padding: 15px;
}
}
}
.show-nav {
opacity: 1;
transform: translateY(20%);
}
<header>
<div class="container">
<div class="nav-heading">
<h1>Navbar</h1>
</div>
<div class="burger" onclick="showNav()">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="nav-container" id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>

Just put z-index = 1 on .burger.
.burger {
flex: 1;
margin-left: 40%;
background-color: red;
padding: 0;
width: auto;
z-index: 1;
}

to bring your menu up front , you can add position:relative + z-index:1; to make sure it stands on top.
You also add the rule cursor: pointer; to show it is a clickable element :)
For the class you add, you could use classList . toggle() , so it shows/hides alternatively.
example
function showNav() {
var nav = document.getElementById("nav");
nav.classList.toggle("show-nav");
}
* {
margin: 0px;
padding: 0;
box-sizing: border;
}
.container {
display: flex;
margin-top: 2%;
}
header {
position: relative;
z-index: 1;
}
.line1,
.line2,
.line3 {
width: 40px;
height: 8px;
background-color: black;
margin-top: 3px;
}
.nav-heading {
flex: 4;
margin-left: 5%;
}
.burger {
flex: 1;
margin-left: 40%;
background-color: red;
padding: 0;
width: auto;
cursor: pointer;
position:relative;
z-index:1
}
.nav-container {
position: absolute;
width: 100%;
opacity: 0;
transition: .2s ease-in-out;
transform: translateY(-20%);
transform-origin: left;
}
ul {
display: flex;
flex-direction: column;
background-color: blue;
width: 100%;
align-items: center;
list-style-type: none;
}
li {
flex: 1;
padding: 15px;
}
li a {
color: black;
}
.show-nav {
opacity: 1;
transform: translateY(20%);
}
<header>
<div class="container">
<div class="nav-heading">
<h1>Navbar</h1>
</div>
<div class="burger" onclick="showNav()">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="nav-container" id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>

Just change the width of
.nav-container {
width: 30%;
}
so it doesn't overlap the burger. In general your CSS structure is not good.

Click back arrow not working properly in JavaScript

This is my html and JavaScript code I want help in this task, After I go back and forth into the submenus several times, the padding gets messed up for the elements and the icons get cut off.
Some times it work properly but when I click back arrow very quickly Its messed the paddings.
I am sharing screenshot also.
$(document).ready(function() {
// Variable declaration...
var left, width, newLeft;
// Add the "top-menu" class to the top level ul...
$('.mobile-menu').children('ul').addClass('top-menu');
// Add buttons to items that have submenus...
$('.has_child_menu').append('<button class="arrow"><i class="fa fa-chevron-right"></i></button>');
// Mobile menu toggle functionality
$('.menu-toggle').on('click', function() {
// Detect whether the mobile menu is being displayed...
display = $('.mobile-menu').css("display");
if (display === 'none') {
// Display the menu...
$('.mobile-menu').css("display", "block");
} else {
// Hide the mobile menu...
$('.mobile-menu').css("display", "none");
// and reset the mobile menu...
$('.current-menu').removeClass('current-menu');
$('.top-menu').css("left", "0");
$('.back-button').css("display", "none");
}
});
// Functionality to reveal the submenus...
$('.arrow').on('click', function() {
// The .current-menu will no longer be current, so remove that class...
$('.current-menu').removeClass('current-menu');
// Turn on the display property of the child menu
$(this).siblings('ul').css("display", "block").addClass('current-menu');
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left - width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Also display the "back button" (if it is hidden)...
if ($('.back-button').css("display") === "none") {
$('.back-button').css("display", "flex");
}
});
// Functionality to return to parent menus...
$('.back-button').on('click', function() {
// Hide the back button (if the current menu is the top menu)...
if ($('.current-menu').parent().parent().hasClass('top-menu')) {
$('.back-button').css("display", "none");
}
left = parseFloat($('.top-menu').css("left"));
width = Math.round($('.mobile').width());
newLeft = left + width;
// Slide the new menu leftwards (into the .mobile viewport)...
$('.top-menu').css("left", newLeft);
// Allow 0.25 seconds for the css transition to finish...
window.setTimeout(function() {
// Hide the out-going .current-menu...
$('.current-menu').css("display", "none");
// Add the .current-menu to the new current menu...
$('.current-menu').parent().parent().addClass('current-menu');
// Remove the .current-menu class from the out-going submenu...
$('.current-menu .current-menu').removeClass('current-menu');
}, 250);
});
});
body {
margin: 0px;
padding: 0px;
font-family: 'Segoe UI';
}
.smart-list-container {
max-width: 95%;
margin: 10px auto;
}
.smart-list-header {
background: #265a88;
padding: 10px 0px;
}
.current-page-title {
text-align: center;
}
.current-page-title h3 {
color: #fff;
margin: 0px;
}
.smart-row {}
.smart-list-icon {
float: left;
width: 60px;
}
.smart-list-icon .fa {
font-size: 35px;
padding-right: 20px;
}
.smart-descrption {
float: right;
width: calc(100% - 60px);
}
.smart-text {
float: left;
}
.smart-text h3 {
margin: 0;
}
.smart-right-btn {
float: right;
}
.smart-right-btn .fa {
font-size: 28px;
}
.sub-list {
display: none;
}
.slide-smart-page {
left: -100%;
position: absolute;
transition: 0.5s all ease;
}
body .slide-smart-sub-page {
display: block;
}
.sub-list {
background: #2196F3;
height: 300px;
}
/*******switch-btn*******/
.smart-right-btn .switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-bottom: 0px;
}
.smart-right-btn .switch input {
display: none;
}
.smart-right-btn .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn .slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.smart-right-btn input:checked+.slider {
background-color: #2196F3;
}
.smart-right-btn input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
.smart-right-btn input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.smart-right-btn .slider.round {
border-radius: 34px;
}
.smart-right-btn .slider.round:before {
border-radius: 50%;
}
/*******switch-btn-end*******/
.smart-list-container .mobile {
background: #fff;
overflow: hidden;
/* NB: Remove this overflow property if you want to get a better idea of what is happening "under the hood" */
position: relative;
}
.smart-list-container .mobile-controls {
background: #337ab7;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
padding: 10px;
}
.smart-list-container .mobile-controls button {
background: none;
border: none;
border-radius: 8px;
color: #fff;
height: 40px;
padding: 0 15px;
outline: none;
font-size: 18px;
}
.smart-list-container button:hover {
cursor: pointer;
}
.smart-list-container .mobile-controls .back-button {
display: none;
}
.smart-list-container .mobile-menu {
background: #fff;
display: none;
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 10;
}
.smart-list-container ul {
margin: 0;
padding: 0;
width: 100%;
position: absolute;
transition: 0.25s;
}
.smart-list-container li {
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
list-style: none;
}
.smart-list-container li a {
color: #000;
flex: 3;
padding: 10px 10px;
text-decoration: none;
}
.smart-list-container li button {
background: none;
border: 0;
flex: 1;
text-align: right;
padding: 10px;
}
.smart-list-container div>ul {
top: 0;
left: 0;
}
.smart-list-container div>ul ul {
display: none;
top: 0;
left: 100%;
}
/* Content styles below here */
.smart-list-container section {
line-height: 1.5;
padding: 20px;
}
.smart-list-container h1 {
font-size: 1.5rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smart-list-container">
<div class="mobile">
<div class="mobile-controls">
<button class="menu-toggle">Page Name</button>
<button class="back-button"><i class="fa fa-chevron-left"></i></button>
</div>
<div class="mobile-menu">
<ul>
<li>
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="smart-right-btn">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
</li>
<li class="has_child_menu">
<a href="">
<div class="smart-row">
<div class="smart-list-item">
<div class="smart-list-icon">
<span class="fa fa-cog"></span>
</div>
<div class="smart-descrption">
<div class="smart-text">
<h3>Face ID</h3>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</a>
<ul>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list-inner</li>
<li>Sub-list-inner</li>
</ul>
</li>
<li>Sub-list</li>
<li class="has_child_menu">
Sub-list-inner
<ul>
<li>Sub-list-inner</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<section>
<article>
<h1>Mobile menu demo</h1>
<p>Click the button above to see the mobile menu in action!</p>
<p>The menu functionality was inspired by the Settings app in iOS.</p>
<p>This implementation uses some jQuery and flexbox. The orginal code was written for a WordPress theme, so absolute positioning was used (rather than fixed positioning - which is easier) to avoid conflicts with the admin bar (when the user is logged-in).</p>
</article>
</section>
</div>
</div>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Do transition: 0.15s; instead of transition: 0.25s; in css file.

Dropdown pushing logo downwards

I'm doing a custom drop-down navigation but when it toggles the logo, in this codepen represented by the blue div, goes to the bottom of the navigation. I've been trying to work around this for a while now and would appreciate any help.
Here is my code:
HTML
<div class='container-fluid nav'>
<div class='container'>
<div class = 'nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
<div class = 'nav__btn bar1'></div>
<div class = 'nav__btn bar2'></div>
<div class = 'nav__btn bar3'></div>
</div>
<ul class = "nav__dropdown">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class='nav__brand u-inlineBlock'>
logo
</div>
</div>
</div>
CSS
.nav__dropdown {
padding-left: 0;
margin-top: 75px;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
}
.nav__dropdown li {
font-size: 20px;
padding: 25px;
width: 40%;
background: white;
border-bottom: 1px solid black;
}
.nav__dropdown li:last-child{
border-bottom: none;
}
.nav__dropdown li:hover{
background: black;
color: seashell
}
.u-inlineBlock {
display: inline-block;
}
JS
function toggleDropdown(x) {
$('.nav__dropdown').slideToggle(500);
}
After this, I'll try to add a sub menu on the right side, so if you could point me in the right path for that as well that would be great
(Notice that this is just a bonus for me, I don't care if you don't help me with that so don't downvote for being too broad or something like that. I also saw some similar questions but they did not help)
Thanks in advance!

Just move the logo before the ul, and remove the margin-top from the ul. And if you want the toggle button and submenu to be flush with the white header, remove .nav { height: 75px; }
function animateNavbarToggle(x) {
x.classList.toggle("toggled");
}
function toggleDropdown(x) {
$('.nav__dropdown').slideToggle(500);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
body {
background-color: pink;
height: 2000px;
}
/*------------------------------------*\
#NAVIGATION
\*------------------------------------*/
.nav {
background-color: white;
height: 75px;
}
.nav__brand {
height: 68px;
width: 227px;
background-color: lightblue;
text-align: center;
}
/**
* Navigation dropdown button
*/
.nav__btn {
width: 22PX;
height: 3px;
background-color: black;
margin: 4px 0;
}
.nav__btn--toggle {
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 22PX;
height: 3px;
background-color: coral;
margin: 4px 0;
transition: 0.4s;
}
/* Rotate first bar */
.toggled .bar1 {
-webkit-transform: rotate(-45deg) translate(-5px, 5px);
transform: rotate(-45deg) translate(-5px, 5px);
}
/* Fade out the second bar */
.toggled .bar2 {
opacity: 0;
}
/* Rotate last bar */
.toggled .bar3 {
-webkit-transform: rotate(45deg) translate(-4px, -4px);
transform: rotate(45deg) translate(-4px, -6px);
}
/**
* Navigation Dropdown
*/
.nav__dropdown {
padding-left: 0;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
}
.nav__dropdown li {
font-size: 20px;
padding: 25px;
width: 40%;
background: white;
border-bottom: 1px solid black;
}
.nav__dropdown li:last-child {
border-bottom: none;
}
.nav__dropdown li:hover {
background: black;
color: seashell;
}
/*------------------------------------*\
#UTILITIES
\*------------------------------------*/
.u-inlineBlock {
display: inline-block;
}
.u-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class='container-fluid nav'>
<div class='container'>
<div class='nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
<div class='nav__btn bar1'></div>
<div class='nav__btn bar2'></div>
<div class='nav__btn bar3'></div>
</div>
<div class='nav__brand u-inlineBlock'>
logo
</div>
<ul class="nav__dropdown">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>

try adding position: fixed to your nav__dropdown CSS
.nav__dropdown {
padding-left: 0;
margin-top: 75px;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
position: fixed;
}
Position fixed essentially removes the content from the flow of the document window, which makes it not cause any interactions with your logo.
More on position fixed here

set flip animation for main menu item on hover

I have a demo website. how can I get the menu hover effect as in the reference website given below. I have fiddled little bit here, but I didn't get the transition when I hover on the menu item
ref site :- click here
hover on the top menu and see the effect. how do I get that effect ?
see the code here till I have done
HTML
<li>
<div class="header-navigation-item-state-wrapper">
<div class="white">
<h4 class="header-white">Collections</h4>
</div>
<div class="black">
<h4 class="header-black">Collections</h4>
</div>
</div>
</li>
CSS
* {
background:yellow
}
li {
list-style:none;
}
.header-black {
background:#000;
color:#fff;
padding:10px;
display:block
}
.black {
display:none;
}
.header-white {
background:#fff;
color:#000;
padding:10px;
display:block
}
JQuery
$(document).ready(function () {
$("li").mouseenter(function () {
$(".white").css('display', 'none');
$(".black").css('display', 'block');
});
$("li").mouseleave(function () {
$(".white").css('display', 'block');
$(".black").css('display', 'none');
});
})

You can use 3d effect following way.
.menu li {
display: inline-block;
}
.menu li a {
color: #fff;
display: block;
text-decoration: none;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}
/* animation domination */
.threed {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
/* complete the animation! */
.threed:hover .box,
.threed:focus .box {
transform: translateZ(-25px) rotateX(90deg);
}
.box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.white {
transform: rotatex(0deg) translatez(25px);
background: white;
color: black;
}
.black {
transform: rotatex(-90deg) translatez(25px);
color: white;
background: black;
}
.white, .black {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 15px 10px;
pointer-events: none;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="menu">
<li><a href="/" class="threed">
Home
<span class="box">
<span class="white">Home</span>
<span class="black">Home</span>
</span>
</a></li>
</ul>
You can change as per your requirement.
Hope it helps.

How Do I Toggle Tabs in JQuery

I am trying to create a tabbed content area which opens and closes each section. My HTML is as follows:
<div class="more-info">
<p>HELLO</p>
</div>
<div class="more-info">
<p>GOODBYE</p>
</div>
The JQuery is
$("a.toggle").click(function () {
$(this).find(".more-info").slideToggle("slow");
});
and my styles are :
a.open {display:block; width:30px; height:30px; background:#999;}
.more-info {display:none; width:100%;}
The idea is to click on the a link and open the it's content box. How do I do this? Doesn't seem to work? The only thing is I can't use unique IDs as the way the page will be created. Therefore, this has to work on a generic class.

You need to slide the required section down and any currently open section up.
Try :
$("a.toggle").on('click', function (e) {
e.preventDefault();
var $section = $(this).next(".more-info").slideDown("slow");
$(".more-info").not($section).slideUp("fast");
});

Try this :
$("a.toggle").on('click', function (e) {
e.preventDefault();
var $a = $(this).next(".more-info");
if($a.is(':visible')){
$a.hide();
}else{
$a.show();
}
});

Check this well designed toggle effect
$('#ce-toggle').click(function(event) {
$('.plan-toggle-wrap').toggleClass('active');
});
$('#ce-toggle').change(function(){
if ($(this).is(':checked')) {
$('.tab-content #yearly').hide();
$('.tab-content #monthly').show();
}
else{
$('.tab-content #yearly').show();
$('.tab-content #monthly').hide();
}
});
body{
margin:0;
}
.plan-toggle-wrap {
text-align: center;
padding: 10px;
background-color: rgb(75,88,152);
position:sticky;
top:0;
}
.toggle-inner input {
position: absolute;
left: 0;
width: 100%;
height: 100%;
margin: 0;
border-radius: 25px;
right: 0;
z-index: 1;
opacity: 0;
cursor: pointer;
}
.custom-toggle {
position: absolute;
height: 25px;
width: 25px;
background-color: #ffffff;
top: 4px;
left: 5px;
border-radius: 50%;
transition: 300ms all;
}
.toggle-inner .t-month, .toggle-inner .t-year {
position: absolute;
left: -70px;
top: 5px;
color: #ffffff;
transition: 300ms all;
}
.toggle-inner .t-year {
left: unset;
right: -85px;
opacity: 0.5;
}
.active > .toggle-inner .t-month {
opacity: 0.5;
}
.active > .toggle-inner .t-year {
opacity: 1;
}
.toggle-inner input:checked + span {
left: 43px;
}
.toggle-inner {
width: 75px;
margin: 0 auto;
height: 35px;
border: 1px solid #ffffff;
border-radius: 25px;
position: relative;
}
.tab-content > div {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(94,110,191);
color: #fff;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="plan-toggle-wrap">
<div class="toggle-inner">
<input id="ce-toggle" type="checkbox">
<span class="custom-toggle"></span>
<span class="t-month">Yearly</span>
<span class="t-year">Monthly</span>
</div>
</div>
<div class="tab-content">
<div id="monthly">MONTHLY</div>
<div id="yearly">YEARLY</div>
</div>
https://codepen.io/Vikaspatel/pen/yRQrpZ