Develop Reference

Jquery CSS fadeOut animation not working when menu close

This is my simple approach for a dropdown menu. When I click to open a menu, it opens with an amination. But I want to add another animation when It will be closed. I tried in many ways, But not working. Why? Somebody, please assist me. When It closes, it directly disappears. No animation is working. Why?
body {
padding: 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-btn {
width: 40px;
height: 40px;
border-radius: 50px;
border: none;
background-color: #f4f4f4;
left: 10px;
font-size: 20px;
}
.dropdown-btn__icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
.dropdown-menu {
position: absolute;
top: 50px;
right: 0;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
display: none;
min-width: 150px;
overflow: hidden;
transform-origin: top right;
animation: dropdown-menu-open 0.3s forwards;
}
.dropdown-menu__list {
list-style: none;
margin: 0;
padding: 0;
}
.dropdown-menu__list li {
padding: 0px;
}
.dropdown-menu__list a {
text-decoration: none;
color: #000;
font-size: 16px;
display: block;
padding: 8px 16px;
}
#keyframes dropdown-menu-open {
from {
opacity: 0;
transform: scale(0, 0);
}
to {
opacity: 1;
transform: scale(1, 1);
}
}
.dropdown--open .dropdown-menu {
display: block;
}
.dropdown-menu__list {
opacity: 1;
transition: opacity 03s ease;
}
.dropdown-menu__list--hidden {
opacity: 0;
transition: opacity 03s ease;
}
#asma {
float: right! important;
}
<span id="asma">
<div class="dropdown">
<button class="dropdown-btn mi-ripple mi-ripple-dark">
<div class="dropdown-btn__icon"> ≡ </div>
</button>
<div class="dropdown-menu">
<ul class="dropdown-menu__list">
<li class="mi-ripple mi-ripple-dark">Home</li>
<li class="mi-ripple mi-ripple-dark">Dropdown</li>
<li class="mi-ripple mi-ripple-dark">Createanewbjsbsjshsbsticket</li>
</ul>
</div>
</div>
</span>
$(document).ready(function() {
$('.dropdown-btn').on('click', function() {
$('.dropdown').toggleClass('dropdown--open');
if ($('.dropdown').hasClass('dropdown--open')) {
$('.dropdown-menu').stop(true, true).fadeIn(300);
} else {
$('.dropdown-menu').stop(true, true).fadeOut(300, function() {
$(this).removeClass('dropdown-menu__list--hidden');
});
}
});
$(document).on('touchstart click', function(event) {
if (!$('.dropdown').is(event.target) && $('.dropdown').has(event.target).length === 0) {
$('.dropdown').removeClass('dropdown--open');
$('.dropdown-menu').stop(true, true).fadeOut(300, function() {
$(this).addClass('dropdown-menu__list--hidden');
});
}
});
});
The jquery fadeOut effect not working. What I can do now? How to add it?

You don't actually need to use fadeIn and fadeOut, or even CSS animation at all. Instead, you can achieve the same effect using CSS transition.
Updated script:
$(document).ready(function() {
$('.dropdown-btn').on('click', function() {
$('.dropdown').toggleClass('dropdown--open');
});
$(document).on('touchstart click', function(event) {
if (!$('.dropdown').is(event.target) && $('.dropdown').has(event.target).length === 0) {
$('.dropdown').removeClass('dropdown--open');
}
});
});
Updated styles:
.dropdown-menu {
transition: all 0.3s ease-in-out; <--- here is the trick
transform: scale(0); <---
position: absolute;
top: 50px;
right: 0;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
min-width: 150px;
overflow: hidden;
transform-origin: top right;
}
.dropdown.dropdown--open .dropdown-menu {
transform: scale(1); <---
}
See https://jsfiddle.net/cheack/kd92r8g0/42/
Update: If you want to apply a different transition when closing, simply add another transition and add a delay to the first one.
.dropdown-menu {
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s; <--- last 0.3s is a delay for a scaling (to fade out first, then scale down)
transform: scale(0);
opacity: 0;
}
.dropdown.dropdown--open .dropdown-menu {
transform: scale(1);
opacity: 1;
transition: transform 0.3s ease-in-out;
}

How Do I Uncheck A Checkbox When Navigating Backwards Or Forwards Between A Web Page?

I have a responsive hamburger menu made with a checkbox that works without any issues. What I'd like to be able to do is uncheck the checkbox when going backward or forward (navigating between pages). I would like it so that when I use the backward or forward button on a web browser the box is unchecked and the menu disappears.
This is the Javascript that I've tried but have not been able to get working properly:
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward"){
$('checkbox').removeAttribute('checked');
}
If anyone knows of a way to uncheck a checkbox and have it so a hamburger menu doesn't appear when navigating between web pages I'd appreciate you sharing your knowledge. Thank you.
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward") {
$('checkbox').removeAttribute('checked');
}
.body {
background-color: white;
font-family: sans-serif;
}
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
#media (max-width: 1130px)and (min-width: 280px) {
.responsive-image-container {
display: flex;
flex-direction: column;
text-align: center;
}
img {
width: 85%;
}
}
*,
*:before,
*:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden; padding-bottom: 10px; font-size: 15px;">
<li style="border-bottom: 1px solid lightgray;">ホーム</li>
<li style="border-bottom: 1px solid lightgray;">ブログ</li>
<li style="border-bottom: 1px solid lightgray;">このサイトについて</li>
<li style="border-bottom: 1px solid lightgray;">参考文献</li>

How Can I Close My Hamburger Menu After Clicking On A Link?

I have a hamburger menu that's made with pure CSS. It works well, but I'd like to be able to have it closed after clicking on one of the links inside it.
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
I've tried to add a closeNav(); function, but haven't been able to get it working. I’d like it so that if I were to go back to a page where the hamburger menu had been opened and used to navigate to another page then it would be closed. If anyone knows how I could close the menu when clicking on a link inside of it I'd appreciate you sharing your knowledge with me. Thank you.
This is my CSS.
.body{background-color: white;
font-family: sans-serif;}
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}

Design issue when navigating side menu hamburger icon in css

My side menu is open all the time, when it is open, I show close button but the button is not proper.
The same occurs when my side menu is close which in turn shows the hamburger icon, that button is also not proper.
There are three lines for a hamburger icon, the middle one gets misaligned.
Refer code below:
Icon transition issue
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if(!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #272727;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s ease-in-out;
transform: translateX(0px);
content: '';
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
transform: translateX(-50px);
}
.menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
transform: translateX(0px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: translateY(16px);
}
.menu-btn.open .menu-btn__burger::after {
transform: translateY(-16px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Hamburger Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
<script src="main.js"></script>
</body>
</html>

You should move the .menu-btn.open class, for more details, see the improvements I made even though it didn't change many things
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #272727;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all 0.5s ease-in-out;
transform: translateX(0px);
content: "";
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255, 101, 47, 0.2);
transition: all 0.5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255, 101, 47, 0.2);
transition: all 0.5s ease-in-out;
transform: translateX(-50px);
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
position: absolute;
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
background: transparent;
box-shadow: none;
}
.menu-btn__burger::before {
transform: translateY(16px);
}
.menu-btn__burger::after {
transform: translateY(-16px);
}

You reversed your CSS code. When .open class is added then close Hamburger icon will be animated. And the position of the Close icon was not correct.
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if(!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #272727;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s ease-in-out;
transform: translateX(-50px);
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
position: relative;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
transform: translateX(-50px);
top: 0;
left: 0;
}
/* ANIMATION */
.menu-btn .menu-btn__burger {
transform: translateX(0px);
background: #fff;
box-shadow: none;
}
.menu-btn .menu-btn__burger::before {
transform: translateY(16px);
}
.menu-btn .menu-btn__burger::after {
transform: translateY(-16px);
}
.menu-btn.open .menu-btn__burger {
background: transparent;
}
.menu-btn.open .menu-btn__burger::before,
.menu-btn.open .menu-btn__burger::after {
left: -50px;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Hamburger Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
<script src="main.js"></script>
</body>
</html>

If you meant that you were having trouble with the middle line disappearing when closed, and appearing off to the side when open, I have the fiddle here https://jsfiddle.net/nickberliner1/cLt8h3aj/3/.
The background of the middle line was transparent on closed, instead of on open.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #272727;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s ease-in-out;
transform: translateX(-50px);
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: transparent;
border-radius: 5px;
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
transform: translateX(-50px);
}
.menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
transform: translateX(0px);
background: white;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
}
.menu-btn.open .menu-btn__burger::before {
transform: translateY(16px);
}
.menu-btn.open .menu-btn__burger::after {
transform: translateY(-16px);
}

Hamburger navigation, how to hide/show links

So I have a navbar with an animated hamburger, and when I click the hamburger I want to display the navigation links, which are hidden by default.
How do I include the closeNav function on the hamburger when its an X? If I just insert it behind the openNav function then nothing shows up at all, so thats obviously not the right way.
function openNav() {
document.getElementById("navbar--middle").style.display = "block";
}
function closeNav() {
document.getElementById("navbar--middle").style.display = "none";
}
function myFunction(x) {
x.classList.toggle("change");
}
.navbar--middle {
display: none;
margin-left: 26%;
position: fixed;
display: none;
& a {
display: inline-flex;
padding: 8px 8px 8px 32px;
}
}
.hamburger {
display: inline-block;
margin-top: 45px;
cursor: pointer;
}
.icon1 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon2 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
/* Rotate first bar */
.change .icon1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .icon2 {
opacity: 0;
}
/* Rotate last bar */
.change .icon3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
<div class="navbar--middle" id="navbar--middle">
Home
Toepassing
Specificaties
Referenties
Dealers
</div>
<div class="navbar--right">
<div class="hamburger" id="hamburger" onclick="openNav(); myFunction(this)">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</div>

You have to put the if else condition of element.style.display like below
var hamburger = document.getElementById('hamburger');
var menu = document.getElementById('navbar--middle');
menu.style.display = "none";
hamburger.addEventListener('click', function() {
this.classList.toggle("change");
if (menu.style.display === "none") {
menu.style.display = "block";
} else {
menu.style.display = "none";
}
})
.navbar--middle {
display: none;
margin-left: 26%;
position: fixed;
display: none;
}
.navbar--middle a {
display: inline-flex;
padding: 8px 8px 8px 32px;
}
.hamburger {
display: inline-block;
margin-top: 45px;
cursor: pointer;
}
.icon1 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon2 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
/* Rotate first bar */
.change .icon1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.change .icon2 {
opacity: 0;
}
/* Rotate last bar */
.change .icon3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
<div class="navbar--middle" id="navbar--middle">
Home
Toepassing
Specificaties
Referenties
Dealers
</div>
<div class="navbar--right">
<div class="hamburger" id="hamburger">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</div>

You want to include the state of the navbar in the class, usually this is done with open and close then once you click the hamburger button you can check to see the current state and execute the appropriate code.
https://api.jquery.com/addclass/
https://api.jquery.com/removeclass/

Why not add a class open, which you toggle in the 'myFunction' you have.
And set the style to display:block for that class?

This works for me:
function openNav() {
document.getElementById("navbar--middle").style.display = "block";
}
function closeNav() {
document.getElementById("navbar--middle").style.display = "none";
}
function myFunction(x) {
x.classList.toggle("change");
if(x.classList.contains("change")) {
openNav();
} else {
closeNav();
}
}
.navbar--middle {
display: none;
margin-left: 26%;
position: fixed;
display: none;
& a {
display: inline-flex;
padding: 8px 8px 8px 32px;
}
}
.hamburger {
display: inline-block;
margin-top: 45px;
cursor: pointer;
}
.icon1 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon2 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
/* Rotate first bar */
.change .icon1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .icon2 {
opacity: 0;
}
/* Rotate last bar */
.change .icon3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
<div class="navbar--middle" id="navbar--middle">
Home
Toepassing
Specificaties
Referenties
Dealers
</div>
<div class="navbar--right">
<div class="hamburger" id="hamburger" onclick="myFunction(this)">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</div>

You could toggle a class on both the menu and the hamburger, and adjust the styles in your CSS instead.
example...
var navbarBurger = document.getElementById('hamburger');
navbarBurger.addEventListener('click', function() {
var menu = document.getElementById("navbar--middle");
navbarBurger.classList.toggle('is-active');
menu.classList.toggle('is-active');
});
.navbar--middle {
display: none;
margin-left: 26%;
position: fixed;
display: none;
& a {
display: inline-flex;
padding: 8px 8px 8px 32px;
}
}
.navbar--middle.is-active {
display: block;
}
.hamburger {
display: inline-block;
margin-top: 45px;
cursor: pointer;
}
.icon1 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon2 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
/* Rotate first bar */
.is-active .icon1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.is-active .icon2 {
opacity: 0;
}
/* Rotate last bar */
.is-active .icon3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
<div class="navbar--middle" id="navbar--middle">
Home
Toepassing
Specificaties
Referenties
Dealers
</div>
<div class="navbar--right">
<div class="hamburger" id="hamburger">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</div>

You would be better off simply toggling a class (on a parent element) on click with javascript. Transitions should be handled by CSS and by having a single parent class toggle you can use 1 class to handle all style changes.
Also take note of the z-index on the hamburger icon. This rule keeps the icon on the highest layer and clickable at all times.
function toggleNav() {
document.getElementById("body-id").classList.toggle('nav-toggle-class');
}
.navbar--middle {
padding-top: 80px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
background: red;
opacity: 0;
pointer-events: none;
transform: translateX(-100%);
transition: all 0.4s ease;
}
body.nav-toggle-class .navbar--middle {
opacity: 1;
pointer-events: all;
transform: translateX(0);
}
.hamburger {
display: block;
cursor: pointer;
position: fixed;
left: 20px;
top: 20px;
z-index: 1;
}
.icon1 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon2 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
.icon3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
border-radius: 5px;
transition: 0.4s;
}
/* Rotate first bar */
.nav-toggle-class .icon1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.nav-toggle-class .icon2 {
opacity: 0;
}
/* Rotate last bar */
.nav-toggle-class .icon3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
.navbar--middle a {
display: block;
padding: 8px 8px 8px 32px;
}
<body id="body-id" class="">
<div class="navbar--middle" id="navbar--middle">
Home
Toepassing
Specificaties
Referenties
Dealers
</div>
<div class="navbar--right">
<div class="hamburger" id="hamburger" onclick="toggleNav();">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</div>
</body>