We Keep Coding

How to Make Nav Hidden When Clicked Outside Of It

I am using a checkbox to toggle/untoggled to display the dropdown Navigation. What I am trying to do is that if the user clicks anywhere other than the Navigation, the Navigation will become unchecked -> if (document.getElementById("navToggle").checked) {console.log("uncheck the nav")}
With my code it seems to execute even if the user clicks on the Navigation, ignoring this -> if (!event.target.matches('.top-nav').
/*window.onclick = function (event) {
if (!event.target.matches('.top-nav')) {
if (document.getElementById("navToggle").checked) {
console.log("uncheck the nav")
}
}
}*/
function myFunction(x) {
x.classList.toggle("change");
}
function dropdown() {
document.getElementById("myDropdown").style.display = "block"
}
window.onclick = function(event) {
if (!event.target.matches('.top-nav')) {
if (document.getElementById("navToggle").checked) {
console.log("uncheck the nav")
}
}
}
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
:root {
--background: rgba(0, 214, 170, .85);
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
button {
cursor: pointer;
background: none;
border: 0;
color: inherit;
/* cursor: default; */
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
}
/* navigation styles start here */
header {
background: var(--background);
text-align: center;
position: fixed;
height: 5rem;
z-index: 999;
width: 100%;
}
/* changed this from the tutorial video to
allow it to gain focus, making it tabbable */
.nav-toggle {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: white;
margin: 6px 0;
transition: 400ms;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-top: 1em;
margin-left: 1em;
margin-bottom: 1em;
}
nav a,
nav button {
color: white;
text-decoration: none;
font-size: 1.25rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover,
nav .dropdown:hover>button {
color: #000;
}
.nav-toggle:checked~nav {
transform: scale(1, 1);
}
.nav-toggle:checked~nav a,
.nav-toggle:checked~nav .dropdown>button {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
.arrow {
border: solid #222;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-bottom: 4px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.dropdown:hover .arrow {
border: solid black;
border-width: 0 3px 3px 0;
}
.dropdown-content {
display: none;
}
.dropdown-content a {
display: block;
text-align: left;
padding: 0;
margin-top: .5em;
margin-left: .5em;
margin-bottom: .5em;
}
.show {
display: block;
}
<header id="top-nav">
<label for="navToggle" class="nav-toggle-label">
<span
><div class="nav-toggle-container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div></div
></span>
</label>
<input type="checkbox" id="navToggle" class="nav-toggle" />
<nav class="nav">
<ul>
<li>
Home
</li>
<li>About</li>
<li>
<div class="dropdown">
<button class="dropdown-button" onclick="dropdown()">
Classes <i class="arrow down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<div class="colums">
<h1>Semester 1</h1>
Physics 11
Chemistry 11
English 11
French 11
<h1>Semester 2</h1>
Gym 11
Psychology 11
Law 11
Pre-calculus 11
</div>
</div>
</div>
</li>
<li>Contact</li>
</ul>
</nav>
</header>

Try to use eventListener everywhere
window.addEventListener("click", event => {
const tgt = event.target.closest('.top-nav');
if (!tgt && document.getElementById("navToggle").checked) {
console.log("uncheck the nav")
}
})

Hamburger Navigation

I built a hamburger menu with a small animation but for the life of me I cannot figure out why it disappears after it is triggered as "active". Everything works perfectly after much trouble shooting but the fact that the hamburger menu disappears after the side menu opens up does not give the user the ability to close the menu and continue navigating the site. I posted all relevant code below please let me know what I overlooked.
window.onload = function () {
window.addEventListener('scroll', function (e) {
if (window.pageYOffset > 100) {
document.querySelector("header").classList.add('is-scrolling');
} else {
document.querySelector("header").classList.remove('is-scrolling');
}
});
const menu_btn = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');
menu_btn.addEventListener('click', function () {
menu_btn.classList.toggle('is-active');
mobile_menu.classList.toggle('is-active');
});
}
.hamburger {
grid-row-start: A;
grid-column-start: A;
grid-row-end: A;
grid-column-end: A;
align-self: center;
justify-self: center;
position: relative;
display: block;
width: 35px;
cursor: pointer;
appearance: none;
background: none;
outline: none;
border: none;
}
.hamburger .bar, .hamburger:after, .hamburger:before {
content: '';
display: block;
width: 100%;
height: 5px;
background-color: #000;
margin: 6px 0px;
transition: 0.4s;
}
.hamburger.is-active:before {
transform: rotate(-45deg) translate(-8px, 6px);
}
.hamburger.is-active:after {
transform: rotate(45deg) translate(-9px, -8px);
}
.hamburger.is-active .bar {
opacity: 0;
}
.mobile-nav {
position: fixed;
top: 0;
left: 100%;
width: 100%;
min-height: 100vh;
display: block;
z-index: 98;
background-color: #12002F;
padding-top: 120px;
transition: 0.4s;
}
.mobile-nav.is-active {
left: 0;
}
.mobile-nav a {
display: block;
width: 100%;
max-width: 200px;
margin: 0 auto 16px;
text-align: center;
padding: 12px 16px;
background-color: #1f103F;
color: #FFF;
text-decoration: none;
}
.mobile-nav a:hover {
background-color: #24104f;
}
<button class="hamburger">
<div class="bar"></div>
</button>
<nav class="mobile-nav">
Home
Home
Home
Home
Home
</nav>

It's being hidden behind mobile-nav, one solution is to increase it's z-index to continue to have it show
.mobile-nav {
position: fixed;
top: 0;
left: 100%;
width: 100%;
min-height: 100vh;
display: block;
z-index: 98; /* Has to be greater than this z-index */
background-color: #12002F;
padding-top: 120px;
transition: 0.4s;
}

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:

Why doesn't my Javascript if else work?

I've been messing around with this mobile friendly navigation menu, and for some reason my menu will open (JS IF statement), but not close (JS ELSE statement. So I'm stuck as to why it is opening but not closing?
P.S. I'm new to JavaScript, so it might be something simple that I over looked, thanks!
Here's the code I'm working with:
function myFunction(x) {
x.classList.toggle("change");
}
function navChange() {
var x = document.getElementById("myNav").style.height
if (x = "0%"){
document.getElementById("myNav").style.height = "100%";
} else {
document.getElementById("myNav").style.height = "0%";
}
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}
}
.container {
position: absolute;
top: 25px;
left: 25px;
display: inline-block;
cursor: pointer;
margin: 20px;
z-index: 12;
}
.bar1, .bar2 {
width: 35px;
height: 4px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
transform: rotate(-45deg) translate(0px, 0px) ;
background-color: gray;
}
.change .bar2 {
transform: translate(1px, -10px) rotate(45deg);
background-color: gray;
}
<div id="myNav" class="overlay">
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<div class="container" onclick="myFunction(this), navChange()">
<div class="bar1"></div>
<div class="bar2"></div>
</div>
Thanks for your time and energy!

The reasoning for the errors that I see is for one you are doing assignment in your conditions.
a = 15;
b = 10;
if(a = b) alert("hello world");
a now is now 10, because we used assignment instead of testing for equality which would look like.
if( a == b)
Also you are testing the style property which looks like you are setting through CSS and style.height will not return what you are looking for. You will need to test PX or what have you.
var height = window.getComputedStyle(document.getElementById("element")).height;
var height = parseInt(height,10);
if( height > 1510 ) {
//do whatever
}

Everything EasyBB said was true, but here's an example on how it can be done cleanly:
function myFunction(x) {
x.classList.toggle("change");
}
function navChange() {
var x = document.getElementById("myNav").clientHeight; // Use clientHeight to get the actual height, ignoring style rules. //.style.height
if (x == "0"){ // == to compare, = here would set the value, so x would always equal 0.
document.getElementById("myNav").style.height = "100%";
} else {
document.getElementById("myNav").style.height = "0"; //No reason to use percentage here, as 0% =0px.
}
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}
}
.container {
position: absolute;
top: 25px;
left: 25px;
display: inline-block;
cursor: pointer;
margin: 20px;
z-index: 12;
}
.bar1, .bar2 {
width: 35px;
height: 4px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
transform: rotate(-45deg) translate(0px, 0px) ;
background-color: gray;
}
.change .bar2 {
transform: translate(1px, -10px) rotate(45deg);
background-color: gray;
}
<div id="myNav" class="overlay">
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<div class="container" onclick="myFunction(this), navChange()">
<div class="bar1"></div>
<div class="bar2"></div>
</div>

Codepen JQuery Code Doesn't Work In My Browser

I've searched online for a solution to this problem for a while now. Unfortunately, no luck. Here is the website I'm using the code from http://codepen.io/anon/pen/wagbYZ
Here is my code:
HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="main.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="main_h">
<div class="row">
<a class="logo" href="#">L/F</a>
<div class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li>Section 01</li>
<li>Section 02</li>
<li>Section 03</li>
<li>Section 04</li>
</ul>
</nav>
</div> <!-- / row -->
</header>
<div class="hero">
<h1><span>loser friendly</span><br>Batman nav.</h1>
<div class="mouse">
<span></span>
</div>
</div>
<div class="row content">
<h1 class="sec01">Section 01</h1>
<p>Hello World!</p>
<h1 class="sec02">Section 02</h1>
<p>Hello World!</p>
<h1 class="sec03">Section 03</h1>
<p>Hello World!</p>
<h1 class="sec04">Section 04</h1>
<p>Hello World!</p>
</div>
</body>
</html>
CSS:
#mixin small {
#media only screen and (max-width: 766px) {
#content;
}
}
$color: #8f8f8f;
$color2: #e8f380;
.main_h {
position: fixed;
top: 0px;
max-height: 70px;
z-index: 999;
width: 100%;
padding-top: 17px;
background: none;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
padding-bottom: 6px;
font-family: "Montserrat", sans-serif;
#include small {
padding-top: 25px;
}
}
.open-nav {
max-height: 400px !important;
.mobile-toggle {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
}
.sticky {
background-color: rgba(255, 255, 255, 0.93);
opacity: 1;
top: 0px;
border-bottom: 1px solid lighten($color, 30%);
}
.logo {
width: 50px;
font-size: 25px;
color: $color;
text-transform: uppercase;
float: left;
display: block;
margin-top: 0;
line-height: 1;
margin-bottom: 10px;
#include small {
float: none;
}
}
nav {
float: right;
width: 60%;
#include small {
width: 100%;
}
ul {
list-style: none;
overflow: hidden;
text-align: right;
float: right;
#include small {
padding-top: 10px;
margin-bottom: 22px;
float: left;
text-align: center;
width: 100%;
}
li {
display: inline-block;
margin-left: 35px;
line-height: 1.5;
#include small {
width: 100%;
padding: 7px 0;
margin: 0;
}
}
a {
color: #888888;
text-transform: uppercase;
font-size: 12px;
}
}
}
.mobile-toggle {
display: none;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 22px;
top: 0;
width: 30px;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
transition: all 200ms ease-in;
#include small {
display: block;
}
span {
width: 30px;
height: 4px;
margin-bottom: 6px;
border-radius: 1000px;
background: $color;
display: block;
}
}
.row {
width: 100%;
max-width: 940px;
margin: 0 auto;
position: relative;
padding: 0 2%;
}
* {
box-sizing: border-box;
}
body {
color: $color;
background: white;
font-family: "Cardo", serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
h1 {
font-size: 30px;
line-height: 1.8;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
}
p {
margin-bottom: 20px;
font-size: 17px;
line-height: 2;
}
.content {
padding: 50px 2% 250px;
}
.hero {
position: relative;
background: url(http://srdjanpajdic.com/slike/2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
color: #fff;
padding-top: 110px;
min-height: 500px;
letter-spacing: 2px;
font-family: "Montserrat", sans-serif;
h1 {
font-size: 50px;
line-height: 1.3;
span {
font-size: 25px;
color: $color2;
border-bottom: 2px solid $color2;
padding-bottom: 12px;
line-height: 3;
}
}
}
.mouse {
display: block;
margin: 0 auto;
width: 26px;
height: 46px;
border-radius: 13px;
border: 2px solid $color2;
bottom: 40px;
position: absolute;
left: 50%;
margin-left: -14px;
span {
display: block;
margin: 6px auto;
width: 2px;
height: 2px;
border-radius: 4px;
background: $color2;
border: 1px solid transparent;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
#keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
JS:
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.main_h').addClass('sticky');
} else {
$('.main_h').removeClass('sticky');
}
});
$('.mobile-toggle').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.main_h').removeClass('open-nav');
} else {
$('.main_h').addClass('open-nav');
}
});
$('.main_h li a').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.navigation').removeClass('open-nav');
$('.main_h').removeClass('open-nav');
}
});
$('nav a').click(function(event) {
var id = $(this).attr("href");
var offset = 70;
var target = $(id).offset().top - offset;
$('html, body').animate({
scrollTop: target
}, 500);
event.preventDefault();
});
The HTML and CSS work fine, but the JQuery is giving me problems.

try wrapping the code in jquery document ready event
$(document).ready(function(){
//event listeners
});